<template>
  <div>
    <dialog-edit :title="$t('cyjg.financialRegionInfo.regionCompanyManageDialogtitle')" :autoSave="false" @onSaved="submitForm('dynamicValidateForm')"
                 :saveFlag="false" :api="{}" :editModel="editModel" :form="newForm" :visible.sync="dialogVisible" labelWidth="100px" :width="width">
      <div class="organ-item">
        <search-form :componentList="componentList" @handleFilter="handleFilter" :formValue.sync="queryParas" @clearParam="clearParam"></search-form>
      </div>
      <data-table :api="api" :menuFlag="false" :showSelection='true' :queryParas="queryParas" :columns="columns"
                  :sourceData.sync="sourceData" :selectedRows.sync="selectedRows" :loadCount.sync="loadCount"
                  :operateBtnLayout="operateBtnLayout" @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>
        <template slot="companyName" slot-scope="scope">
          <div class="textTop" v-if="scope.data.row.enterpriseTagStatus && scope.data.row.enterpriseTagStatus !== '0'">
            <el-tooltip placement="top">
              <div slot="content">
                {{$t('cyjg.financialRegionInfo.reasonsSettingUp')}}：{{scope.data.row.tagReason}}
                <div class="margin-top">{{$t('cyjg.financialRegionInfo.effectTime')}}：{{scope.data.row.tagEffectiveTime | formatDatetime}}</div>
              </div>
              <i :class="listClass(scope.data.row)" v-show="scope.data.row.enterpriseTagStatus === '2' || scope.data.row.enterpriseTagStatus === '1'"></i>
            </el-tooltip>
          </div>
          <span @click="showView(scope.data.row)" class="likeA">{{scope.data.row.companyName}}</span>
        </template>
      </data-table>
    </dialog-edit>
    <defendCompany :visible.sync="defendVisble" :form="newForm" @saveSuccess="saveSuccess"/>
    <!-- 项目公司业务信息 -->
    <proj-company-info-manage-edit :editModel="showModel" :visible.sync="businessVisible" :form="item" :regMsg="regMsg"></proj-company-info-manage-edit>
    <!--<business-region-company-edit :visible.sync="businessVisible" :editModel="showModel" :form="item"></business-region-company-edit>-->
  </div>
</template>

<script>
import { searchForm, DataTable, authButton, DialogEdit } from 'newepoch-components'
import financialRegionInfoApi from '@/api/cyjg/financialRegionInfoApi.js'
import BasePage from '@/pages/basePage'
import defendCompany from './defendCompany'
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: 'regionCompanyManage',
  data () {
    return {
      item: {},
      width: '1480px',
      // dialogtitle: '区域项目公司管理',
      detectVisible: true,
      businessVisible: false,
      showModel: '',
      newForm: {},
      queryParas: {
        // 核心企业id
        coreCompanyId: '',
        coreCompanyName: '',
        companyName: '',
        largeAreaName: '',
        smallAreaName: '',
        // 大区域id
        largeAreaId: '',
        smallAreaId: '',
        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: 'largeAreaName',
          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: 'smallAreaName',
          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',
          disabled: false,
          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: [],
      operateBtnLayout: '',
      defendVisble: false,
      columns: [
        // 项目公司名称
        {
          prop: 'companyName',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].cyjg.financialRegionInfo.CompanyName,
          width: '',
          slot: true
        }
      ]
    }
  },
  methods: {
    clearParam () {
      this.queryParas.companyName = ''
    },
    handleFilter () {
      this.loadCount = this.loadCount + 1
    },
    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'
      }
    },
    saveSuccess () {
      this.loadCount = this.loadCount + 1
    },
    // 复选框勾选数据
    selectRowChange (val) {
      this.selectedRows = val
    },
    addCompany () {
      this.defendVisble = true
    },
    selectChanged () {
      // 输入框选择改变事件
    },
    showView (data) {
      this.$set(data, 'tagCode', '150')
      this.$set(data, 'enterpriseId', data.companyId)
      this.item = Object.assign({}, data)
      this.showModel = 'V'
      this.businessVisible = true
    },
    // 批量删除
    delBatch () {
      if (this.selectedRows.length === 0) {
        this.warning(this.$i18n.messages[this.$i18n.locale].regMsg.financialRegionInfo.checklistData)
        return
      }
      let arr = this.selectedRows.map(it => {
        return it.keyId
      })
      let $this = this
      $this.$confirm(this.$i18n.messages[this.$i18n.locale].regMsg.financialRegionInfo.tipsMessage, this.$i18n.messages[this.$i18n.locale].regMsg.financialRegionInfo.warning, {
        type: 'warning'
      }).then(() => {
        financialRegionInfoApi.financialInfoManage.dels({ ids: arr, delType: '3' }).then(res => {
          if (res && res.data) {
            $this.success(this.$i18n.messages[this.$i18n.locale].regMsg.financialRegionInfo.delSuccessInfo)
            $this.saveSuccess()
          } else {
            $this.error(this.$i18n.messages[this.$i18n.locale].regMsg.financialRegionInfo.delFailInfo)
          }
        })
      }).catch(() => {
      })
    }
  },
  computed: {
    dialogVisible: {
      get: function () {
        return this.visible
      },
      set: function (value) {
        this.$emit('update:visible', value)
      }
    },
    api () {
      return financialRegionInfoApi.companyView
    }
  },
  watch: {
    visible (val) {
      let $this = this
      if (val) {
        $this.$nextTick(() => {
          $this.newForm = $this.form
          $this.queryParas.coreCompanyId = $this.form.coreCompanyId
          $this.queryParas.largeAreaId = $this.form.largeAreaId
          $this.queryParas.smallAreaId = $this.form.keyId
          $this.queryParas.coreCompanyName = $this.form.coreCompanyName
          $this.queryParas.largeAreaName = $this.form.largeAreaName
          $this.queryParas.smallAreaName = $this.form.smallAreaName
          $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/financialRegionInfo/regionCompanyManage.scss">
</style>
