<template>
  <div>
    <dialog-edit :title="$t('cyjg.businessRegionInfo.busregionCompanyManageDialogtitle')" :api="{}" :autoSave="false" @onSaved="submitForm('dynamicValidateForm')"
            :editModel="editModel" :form="formtList" :visible.sync="dialogVisible" :width="width">
      <search-form :componentList="componentList" @handleFilter="handleFilter" :formValue.sync="queryParas" :isShowFoldBtn="false"
                   @clearParam="clearParam"></search-form>
      <data-table :api="api" :menuFlag="false" :showSelection='true' :type="'selection'" :disabledAll="true" :queryParas="queryParas"
                  :sourceData.sync="sourceData" :loadCount.sync="loadCount" :operateBtnLayout="operateBtnLayout" :operatWidth="'80'"
                  @selectRowChange="selectRowChange">
        <template slot="headButton">
          <div class="margin-right">
            <auth-button :type="'primary'" :size="'medium'" :label="$t('common.create')" @click="addCompany"></auth-button>
            <auth-button :type="'primary'" :size="'medium'" :label="$t('cyjg.businessRegionInfo.delete')" @click="delBatch"></auth-button>
          </div>
        </template>
        <!-- 项目公司名称 -->
        <el-table-column :label="$t('cyjg.businessRegionInfo.enterpriseName')" align="left">
          <template slot-scope="scope">
            <div class="textTop" v-if="scope.row.enterpriseTagStatus && scope.row.enterpriseTagStatus !== '0'">
              <el-tooltip placement="top">
                <div slot="content">
                  {{$t('cyjg.businessRegionInfo.reasonsSettingUp')}}：{{scope.row.tagReason}}
                  <div class="margin-top">{{$t('cyjg.businessRegionInfo.effectTime')}}：{{scope.row.tagEffectiveTime | formatDatetime}}
                  </div>
                </div>
                <i :class="listClass(scope.row)" v-show="scope.row.enterpriseTagStatus === '2' || scope.row.enterpriseTagStatus === '1'"></i>
              </el-tooltip>
            </div>
            <span @click="showCompany(scope.row)" class="likeA">{{scope.row.companyName}}</span>
          </template>
        </el-table-column>
        <!-- 项目公司对接人 -->
        <el-table-column :label="$t('cyjg.businessRegionInfo.companyGetMan')" align="left">
          <template slot-scope="scope">
            <span v-for="(item, index) in scope.row.contacts" :key="index">
              <!-- 判断是否可以点击 -->
              <span @click="showView(scope.row)" class="likeA" v-if="item.stauts === 0">
                {{item.enterpriseContactsName}}
              </span>
              <span v-else>
                {{item.enterpriseContactsName}}
              </span>
            </span>
          </template>
        </el-table-column>
        <!-- 区域专员 -->
        <el-table-column :label="$t('cyjg.businessRegionInfo.commissionerName')" align="left">
          <template slot-scope="scope">
            <span v-for="(item, index) in scope.row.commissioner" :key="index">
                {{item.areaCommissionerName}}
            </span>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column :label="$t('common.operate')" align="center">
          <template slot-scope="scope">
            <!--<div>-->
              <!--<btn-edit @operateBtnClick="operateBtnClick(scope.row)" />-->
            <!--</div>-->
            <auth-button :title="$t('common.edit')" size="small"
                         @click="operateBtnClick(scope.row)" icon="iconfont iconbianji" class="iconCircle"></auth-button>
          </template>
        </el-table-column>
      </data-table>
    </dialog-edit>
    <!-- 项目公司维护 -->
    <defend-company :editModel="defendModel" :visible.sync="defendVisble" :form="item" :regMsg="regMsg" @saveSuccess="saveSuccess"></defend-company>
    <!--<bussinessRegionCompanyEdit :editModel="companyModel" :visible.sync="companyVisble" :form="companyItem"></bussinessRegionCompanyEdit>-->
    <proj-company-info-manage-edit :editModel="companyModel" :visible.sync="companyVisble" :form="companyItem" :regMsg="regMsg"></proj-company-info-manage-edit>
  </div>
</template>

<script>
import { DialogEdit, searchForm, authButton, DataTable } from 'newepoch-components'
import businessRegionInfoApi from '@/api/cyjg/businessRegionInfoApi.js'
import BasePage from '@/pages/basePage.js'
import DefendCompany from '@/pages/cyjg/businessRegionInfo/projectManage/defendCompany.vue'
import tirmInput from '@/components/element/tirmInput.vue'
import projCompanyInfoManageEdit from '@/pages/cyjg/businessRegionInfo/projectManage/projCompanyInfoManageEdit.vue'
export default {
  extends: new BasePage(),
  props: {
    visible: {
      required: true,
      type: [Boolean],
      default: function () {
        return false
      }
    },
    form: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  components: {
    DialogEdit,
    searchForm,
    authButton,
    DataTable,
    DefendCompany,
    projCompanyInfoManageEdit
  },
  name: 'busregionCompanyManage',
  data () {
    return {
      width: '1480px',
      detectVisible: true,
      formtList: {},
      queryParas: {
        // 核心企业id
        coreCompanyId: '',
        // 大区域id
        largeAreaId: '',
        smallAreaId: '',
        coreCompanyName: '',
        bigAreaName: '',
        littleAreaName: '',
        companyName: '',
        pageIndex: 1,
        pageSize: 10
      },
      componentList: [
        // 核心企业
        {
          value: 'coreCompanyName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.coreEnterprise,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.input,
          cols: [24, 24, 24, 8],
          prop: 'coreCompanyId'
        },
        // 大区域
        {
          value: 'bigAreaName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.bigArea,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.input,
          cols: [24, 24, 24, 8],
          prop: 'coreCompanyId'
        },
        // 小区域
        {
          value: 'littleAreaName',
          disabled: true,
          componentName: 'el-input',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.smallArea,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.input,
          cols: [24, 24, 24, 8],
          prop: 'coreCompanyId'
        },
        {
          value: 'companyName',
          componentName: tirmInput,
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.projectCompanyName,
          width: '50%',
          placeholder: this.$i18n.messages[this.$i18n.locale].common.pleaseInput,
          cols: [24, 24, 24, 8],
          prop: 'companyName'
        }
      ],
      sourceData: [],
      selectedRows: [],
      item: {},
      operateBtnLayout: '',
      // 控制项目公司管理页面内的弹框显示隐藏
      componentVisible: false,
      // 项目公司对接人维护
      defendVisble: false,
      companyModel: 'V',
      defendModel: '',
      companyVisble: false,
      companyItem: {}
    }
  },
  methods: {
    handleFilter () {
      this.loadCount = this.loadCount + 1
    },
    clearParam () {
      this.queryParas.companyName = ''
    },
    // 黑名单/灰名单 样式切换
    listClass (row) {
      if (row.enterpriseTagStatus === '2') {
        return 'el-icon-warning gray-text-Icon'
      } else if (row.enterpriseTagStatus === '1') {
        return 'el-icon-warning black-text-Icon'
      }
    },
    // 复选框勾选数据
    selectRowChange (val) {
      this.selectedRows = val
    },
    addCompany () {
      this.item = Object.assign({}, this.formtList)
      this.defendModel = 'C'
      this.defendVisble = true
    },
    operateBtnClick (row) {
      // 点击编辑按钮
      let contactIds = []
      let commissionerIds = []
      row.contacts.forEach(it => {
        contactIds.push(it.enterpriseContactsKeyId)
      })
      row.commissioner.forEach(p => {
        commissionerIds.push(p.areaCommissionerId)
      })
      this.item = Object.assign({
        contactIds: contactIds,
        commissionerIds: commissionerIds,
        coreCompanyId: this.formtList.coreCompanyId,
        areaId: this.formtList.littleAreaKeyId,
        areaName: this.formtList.littleAreaName
      }, row)
      this.defendVisble = true
      this.defendModel = 'E'
    },
    showView () {
      // this.$message('等一哈')
    },
    showCompany (data) {
      this.$set(data, 'tagCode', '150')
      this.$set(data, 'enterpriseId', data.companyId)
      this.companyItem = Object.assign({}, data)
      this.companyVisble = true
      this.companyModel = 'V'
    },
    saveSuccess () {
      let $this = this
      $this.loadCount = $this.loadCount + 1
    },
    // 批量删除
    delBatch () {
      if (this.selectedRows.length === 0) {
        this.warning(this.$i18n.messages[this.$i18n.locale].regMsg.businessRegionInfo.checklistData)
        return
      }
      let arr = this.selectedRows.map(it => {
        return it.keyId
      })
      let $this = this
      $this.$confirm(this.$i18n.messages[this.$i18n.locale].regMsg.businessRegionInfo.tipsMessage, this.$i18n.messages[this.$i18n.locale].regMsg.businessRegionInfo.warning, {
        type: 'warning'
      }).then(() => {
        businessRegionInfoApi.businessRegionInfoQueryApi.dels({ ids: arr, delType: '2' }).then(res => {
          if (res && res.data) {
            $this.success(this.$i18n.messages[this.$i18n.locale].regMsg.businessRegionInfo.delSuccessInfo)
            $this.saveSuccess()
          } else {
            $this.error(this.$i18n.messages[this.$i18n.locale].regMsg.businessRegionInfo.delFailInfo)
          }
        })
      }).catch(() => {
      })
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    },
    api () {
      return businessRegionInfoApi.companyView
    }
  },
  watch: {
    visible (val) {
      let $this = this
      if (val) {
        $this.$nextTick(() => {
          $this.formtList = $this.form
          $this.queryParas.coreCompanyId = $this.formtList.coreCompanyId
          $this.queryParas.largeAreaId = $this.formtList.bigAreaKeyId
          $this.queryParas.smallAreaId = $this.formtList.littleAreaKeyId
          $this.queryParas.coreCompanyName = $this.formtList.coreCompanyName
          $this.queryParas.bigAreaName = $this.formtList.bigAreaName
          $this.queryParas.littleAreaName = $this.formtList.littleAreaName
          $this.loadCount = $this.loadCount + 1
        })
      } else {
        $this.queryParas = {
          // 核心企业id
          coreCompanyId: '',
          coreCompanyName: '',
          companyName: '',
          bigAreaName: '',
          littleAreaName: '',
          // 大区域id
          largeAreaId: '',
          smallAreaId: '',
          pageIndex: 1,
          pageSize: 10
        }
      }
    }
  }
}
</script>

<style scoped lang="scss" src="@/styles/cyjg/businessRegionInfo/busregionCompanyManage.scss">
</style>
