<template>
  <div>
    <c-r-m-list-head
      :search.sync="search"
      :is-seas="true"
      :pool-id="poolId"
      :pool-auth="poolAuth"
      title="公海管理"
      placeholder="请输入客户名称/手机/电话"
      main-title="新建客户"
      crm-type="customer"
      @on-handle="listHeadHandle"
      @on-search="crmSearch"
      @on-export="exportInfos">
      <el-menu
        slot="icon"
        ref="elMenu"
        default-active="seas"
        mode="horizontal"
        active-text-color="#2362FB"
        @select="menuSelect">
        <el-menu-item
          v-for="(item, index) in menuItems"
          :key="index"
          :index="item.path">
          <img :src="item.icon">
          <span>{{ item.title }}</span>
        </el-menu-item>
      </el-menu>
    </c-r-m-list-head>
    <div
      v-empty="!crm.pool.index && poolAuth.index"
      xs-empty-icon="nopermission"
      xs-empty-text="暂无权限"
      class="crm-container">
      <c-r-m-table-head
        ref="crmTableHead"
        :is-seas="isSeas"
        :pool-id="poolId"
        :pool-auth="poolAuth"
        :sort-data="sortData"
        crm-type="customer"
        @filter="handleFilter"
        @handle="handleHandle"
        @scene="handleScene">
        <template slot="custom">
          <div>公海：</div>
          <el-select
            v-model="poolId"
            @change="poolChange">
            <el-option
              v-for="item in poolList"
              :key="item.poolId"
              :label="item.poolName"
              :value="item.poolId"/>
          </el-select>
          <!-- 添加新按钮 -->
          <el-button
            v-if="poolId === 34557"
            type="primary"
            size="small"
            style="margin-left: 10px"
            @click="handlePoolAction">
            同步数据
          </el-button>
        </template>
      </c-r-m-table-head>
      <el-table
        v-loading="loading"
        id="crm-table"
        :row-height="40"
        :data="list"
        :height="tableHeight"
        :cell-class-name="cellClassName"
        :row-key="`${crmType}Id`"
        class="n-table--border"
        use-virtual
        stripe
        border
        highlight-current-row
        style="width: 100%"
        @row-click="handleRowClick"
        @sort-change="sortChange"
        @header-dragend="handleHeaderDragend"
        @selection-change="handleSelectionChange">
        <el-table-column
          show-overflow-tooltip
          reserve-selection
          type="selection"
          align="center"
          width="55"/>
        <el-table-column
          v-for="(item, index) in fieldList"
          :key="index"
          :fixed="index==0"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          sortable="custom"
          show-overflow-tooltip>
          <template slot-scope="{ row, column, $index }">
            <template v-if="item.prop == 'dealStatus'">
              <i :class="row[item.prop] | dealIcon"/>
              <span>{{ row[item.prop] | dealName }}</span>
            </template>
            <template v-else-if="item.prop == 'status'">
              <i
                v-if="row.status == 2"
                class="wk wk-circle-password customer-lock"/>
            </template>
            <wk-field-view
              v-else
              :props="item"
              :form-type="item.formType"
              :value="row[column.property]"
            >
              <template slot-scope="{ data }">
                {{ fieldFormatter(row, column, row[column.property], item) }}
              </template>
            </wk-field-view>
          </template>
        </el-table-column>
        <el-table-column/>
        <el-table-column
          :resizable="false"
          fixed="right"
          width="40">
          <template
            slot="header"
            slot-scope="slot">
            <field-set
              :is-seas="isSeas"
              :crm-type="crmType"
              :pool-id="poolId"
              @change="setSave"/>
          </template>
        </el-table-column>
      </el-table>
      <div class="p-contianer">
        <el-pagination
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size.sync="pageSize"
          :total="total"
          :pager-count="5"
          class="p-bar"
          background
          layout="prev, pager, next, sizes, total, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"/>
      </div>
      <!-- 同步数据参数对话框 -->
      <el-dialog
        :visible.sync="openXky"
        title="请选择同步参数"
        width="400px"
        append-to-body>
        <el-form>
          <el-table-column label="同步月份">
            同步月份：
            <el-date-picker
              v-model="month"
              type="month"
              value-format="yyyyMM"
              placeholder="选择同步月"/>
          </el-table-column>
          <el-form-item style="padding-top: 30px">
            地区：
            <el-select v-model="xzqhDm" placeholder="请选择">
              <el-option
                v-for="item in xzqhList"
                :key="item.xzqhDm"
                :label="item.xzqhMc"
                :value="item.xzqhDm"/>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button :loading="loadingGs" type="primary" @click="sysGsdjxx">提交</el-button>
        </span>
      </el-dialog>
    </div>
    <customer-detail
      v-if="showDview"
      :id.sync="rowID"
      :page-list="crmType == rowType ? list : []"
      :page-index.sync="rowIndex"
      :pool-id="poolId"
      :is-seas="isSeas"
      class="d-view"
      @handle="handleHandle"
      @hide-view="showDview=false"/>
  </div>
</template>

<script>
import { crmCustomerPoolNameListAPI, crmCustomerPoolQueryAuthAPI } from '@/api/crm/customer'

import CustomerDetail from '../customer/Detail'
import TableMixin from '../mixins/Table'
import {getXzqhList} from "../../../api/crm/xzqh";
import {syGsdjxx} from "../../../api/crm/gsdjxx";

export default {
  /** 客户管理 的 公海列表 */
  name: 'SeacIndex',
  components: {
    CustomerDetail
  },
  filters: {
    dealIcon(statu) {
      return statu == 1 ? 'wk wk-success deal-suc' : 'wk wk-close deal-un'
    },

    dealName(statu) {
      return statu == 1 ? '已成交' : '未成交'
    }
  },
  mixins: [TableMixin],
  data() {
    return {
      crmType: 'customer',
      isSeas: true, // 是公海
      poolId: '',
      poolAuth: {},
      poolList: [],
      openXky: false,
      xzqhList: [],
      month: '',
      xzqhDm: '',
      loadingGs: false
    }
  },
  computed: {
    menuItems() {
      const temp = []
      if (this.crm && this.crm.customer) {
        temp.push({
          title: '客户',
          path: 'customer',
          icon: require('@/assets/img/crm/customer_not.png')
        })
      }

      if (this.crm && this.crm.pool) {
        temp.push({
          title: '公海',
          path: 'seas',
          icon: require('@/assets/img/crm/seas.png')
        })
      }

      if (this.crm && this.crm.customer && this.crm.customer.nearbyCustomer) {
        temp.push({
          title: '附近客户',
          path: 'nearby',
          icon: require('@/assets/img/crm/nearby_not.png')
        })
      }

      return temp
    }
  },
  watch: {
    poolId: {
      handler(newVal) {
        if (newVal) {
          this.getCustomerPoolAuth(newVal)
        }
      },
      deep: true,
      immediate: true
    }
  },
  created() {
    this.getPoolList()
  },
  activated() {
    if (this.isRequested) {
      this.getList()
    }
  },
  deactivated() {
    this.$refs.elMenu.activeIndex = 'seas'
  },
  methods: {
    /**
     * 获取公海权限
     */
    getCustomerPoolAuth(poolId) {
      crmCustomerPoolQueryAuthAPI({
        poolId: poolId
      })
        .then(res => {
          this.poolAuth = res.data || {}
        })
        .catch(() => {})
    },
    // 打开选项框
    handlePoolAction() {
      getXzqhList().then(resp => {
        console.log(resp.data)
        this.xzqhList = resp.data
        this.openXky = true
      })
    },
    // 同步工商登记信息
    sysGsdjxx() {
      let xzqhMc = null
      for (let i = 0; i < this.xzqhList.length; i++) {
        if (this.xzqhList[i].xzqhDm === this.xzqhDm){
          xzqhMc = this.xzqhList[i].xzqhMc
        }
      }
      const pa = {
        yf: this.month,
        xzqhDm: this.xzqhDm,
        xzqhMc: xzqhMc
      }
      console.log(pa)
      syGsdjxx(pa)
      this.$message.success(`同步成功，请稍后刷新界面`)
      this.openXky = false
    },
    /**
     * 左侧菜单选择
     */
    menuSelect(key, keyPath) {
      this.$emit('menu-select', key, keyPath)
    },

    /**
     * 公海数据
     */
    getPoolList() {
      crmCustomerPoolNameListAPI()
        .then(res => {
          this.poolList = res.data || []
          this.poolId = this.poolList.length > 0 ? this.poolList[0].poolId : ''
        })
        .catch(() => {
        })
    },

    /**
     * 选择公海
     */
    poolChange() {
      this.currentPage = 1
      this.getFieldList(true)
    },

    /**
     * 通过回调控制class
     */
    cellClassName({ row, column, rowIndex, columnIndex }) {
      if (column.property === 'customerName') {
        return 'can-visit--underline'
      } else if (column.property === 'businessCheck') {
        return 'can-visit'
      } else {
        return ''
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../styles/table.scss';
</style>
