<template>
  <div class="check-container">
    <div class="condition-content">
      <el-form label-position="top"
               class="condition-items">
        <el-form-item v-for="(item, index) in conditionList"
                      :key="item.field"
                      class="condition-item"
                      :style="{'padding-left': getPaddingLeft(item, index), 'padding-right': getPaddingRight(item, index)}">
          <div slot="label"
               class="form-label">
            {{item.name}}
            <el-tooltip class="item"
                        effect="dark"
                        placement="top-start">
              <div slot="content"
                   style="line-height: 20px;"
                   v-html="item.tips">
              </div>
              <i v-if="item.showTips"
                 class="wukong wukong-help_tips"></i>
            </el-tooltip>
          </div>
          <el-input v-model="item.value"
                    type="text"></el-input>
        </el-form-item>
      </el-form>
      <el-button type="primary"
                 class="condition-button"
                 @click="getList">查询</el-button>
    </div>
    <div class="table-content">
      <el-table v-loading="loading"
                id="crm-table"
                :data="list"
                height="400"
                stripe
                border
                highlight-current-row
                :cell-style="cellStyle"
                @row-click="handleRowClick"
                style="width: 100%">
        <el-table-column v-for="(item, index) in fieldList"
                         :key="index"
                         show-overflow-tooltip
                         :prop="item.field"
                         :label="item.name">
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination layout="prev, pager, next"
                       @current-change="getList"
                       :current-page.sync="currentPage"
                       :total="total">
        </el-pagination>
      </div>
    </div>
    <!-- 相关详情页面 -->
    <c-r-m-all-detail :visible.sync="showDview"
                      :crmType="rowType"
                      :id="rowID"
                      :listenerIDs="['duplicate-check-container']">
    </c-r-m-all-detail>
  </div>
</template>
<script type="text/javascript">
import { crmCustomerQueryListAPI } from '@/api/customermanagement/customer'
import { crmContactsQueryListAPI } from '@/api/customermanagement/contacts'
import { crmLeadsQueryListAPI } from '@/api/customermanagement/clue'

import { XhInput } from '@/components/CreateCom'
import CRMAllDetail from '@/views/customermanagement/components/CRMAllDetail'

export default {
  name: 'check-content', // 验重内容

  components: {
    XhInput,
    CRMAllDetail
  },

  computed: {
    // 表头信息
    fieldList() {
      if (this.type == 'customer') {
        return [
          { name: '客户名称', field: 'customerName' },
          { name: '负责人', field: 'ownerUserName' }
        ]
      } else if (this.type == 'contacts') {
        return [
          { name: '姓名', field: 'name' },
          { name: '客户名称', field: 'customerName' },
          { name: '负责人', field: 'ownerUserName' }
        ]
      } else if (this.type == 'leads') {
        return [
          { name: '线索名称', field: 'leadsName' },
          { name: '负责人', field: 'ownerUserName' }
        ]
      }
      return []
    }
  },

  watch: {},

  data() {
    return {
      // 条件数组
      conditionList: this.getConditionList(),
      currentPage: 1,
      total: 1,
      loading: false,
      list: [],

      /** 控制详情展示 */
      rowID: '', // 行信息
      rowType: '', //详情类型
      showDview: false
    }
  },

  props: {
    type: {
      required: true,
      type: String
    }
  },

  mounted() {},

  methods: {
    /** 获取列表数据 */
    getList() {
      this.loading = true
      let params = {
        page: this.currentPage,
        limit: 10,
        types: 'crm_' + this.type
      }
      let pass = false
      for (let index = 0; index < this.conditionList.length; index++) {
        const element = this.conditionList[index]
        params[element.field] = element.value
        if (element.value) {
          pass = true
        }
      }

      if (pass) {
        let request = {
          customer: crmCustomerQueryListAPI,
          contacts: crmContactsQueryListAPI,
          leads: crmLeadsQueryListAPI
        }[this.type]

        request(params)
          .then(res => {
            this.list = res.data.list
            this.total = res.data.totalRow

            this.loading = false
          })
          .catch(() => {
            this.loading = false
          })
      } else {
        this.$message.error('查询条件不能为空')
      }
    },

    // 获取左边padding
    getPaddingLeft(item, index) {
      return index % 2 == 0 ? '0' : '30px'
    },

    // 获取左边padding
    getPaddingRight(item, index) {
      return index % 2 == 0 ? '30px' : '0'
    },

    /**
     * 获取条件数组信息
     */
    getConditionList() {
      let customerTips = `为确保客户信息安全性，客户名称字段增加了防作弊机制，以<br />
                下关键词为禁搜关键词：<br />
                1.省、市名；<br />
                2.中国、公司、有限公司、有限责任公司、股份有限公司；`
      let leadsTips = `为确保客户信息安全性，线索名称字段增加了防作弊机制，以<br />
                下关键词为禁搜关键词：<br />
                1.省、市名；<br />
                2.中国、公司、有限公司、有限责任公司、股份有限公司；`
      if (this.type == 'customer') {
        return [
          {
            name: '客户名称',
            field: 'customerName',
            value: '',
            showTips: true,
            tips: customerTips
          },
          { name: '手机', field: 'mobile', value: '' },
          { name: '电话', field: 'telephone', value: '' }
        ]
      } else if (this.type == 'contacts') {
        return [
          { name: '联系人', field: 'name', value: '' },
          {
            name: '客户名称',
            field: 'customerName',
            value: '',
            showTips: true,
            tips: customerTips
          },
          { name: '手机', field: 'mobile', value: '' },
          { name: '电话', field: 'telephone', value: '' }
        ]
      } else if (this.type == 'leads') {
        return [
          {
            name: '线索名称',
            field: 'leadsName',
            value: '',
            showTips: true,
            tips: leadsTips
          },
          { name: '手机', field: 'mobile', value: '' },
          { name: '电话', field: 'telephone', value: '' }
        ]
      }
      return []
    },

    /**
     * 查看详情
     */
    handleRowClick(row, column, event) {
      let type = this.type
      if (column.property == 'customerName' && this.type == 'contacts') {
        type = 'customer'
      }
      this.rowID = row[this.type + 'Id']
      this.rowType = type
      this.showDview = true
    },

    /**
     * 通过回调控制style
     */
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (
        column.property === 'name' ||
        column.property === 'customerName' ||
        column.property === 'leadsName'
      ) {
        return { color: '#3E84E9', cursor: 'pointer' }
      } else {
        return ''
      }
    }
  },
  destroyed() {}
}
</script>
<style lang="scss" scoped>
.check-container {
  height: 100%;
  overflow-y: auto;
  padding: 0 30px;
}

// 提示标志
.wukong-help_tips {
  color: #999;
  font-size: 12px;
}

.wukong-help_tips:hover {
  color: $xr-color-primary;
}

//  条件
.condition-content {
  .condition-items {
    display: flex;
    flex-wrap: wrap;
  }

  .condition-item {
    flex: 0 0 50%;
    flex-shrink: 0;
    /deep/ .el-form-item__label {
      padding: 10px 0 0 0 !important;
      line-height: 30px;
      font-size: 13px;
    }
  }
  .condition-button {
    margin-top: 15px;
  }
}

.el-form-item {
  margin-bottom: 0px;
}

// 表内容
.table-content {
  margin-top: 20px;
}
</style>
