<!--回寄地址-->
<template>
  <div class="crm-main">
    <data-table :api="api" :headTitle="$t('enterpriseInfoManage.supplierInfoManage.returnAddressEdit.retrunaddListHead')"
                :loadCount.sync="loadCount"
                :queryParas="queryParas" :sourceData="sourceData" operateBtnLayout="" @getTableData="getTableData"
                :columns="columns" :showPage="false" loadList="getaddressList">
      <!-- 区域 -->
      <template slot="district" slot-scope="scope">
        <expand-collapse :sourceData="sourceData" colProp="area1"
                         valueProp="district" :rowIndex="scope.data.$index"></expand-collapse>
      </template>
      <!-- 联系人 -->
      <template slot="linkmanName" slot-scope="scope">
        <el-row v-for="(item, index) in scope.data.row.linkmanList" :key="index">
          <span>{{item.linkmanName}}</span>
        </el-row>
      </template>
      <el-table-column align="center" :label="$t('common.operate')" width="100" fixed="right">
        <template slot-scope="scope">
          <auth-button :xhr="$xhr" :store="$store" class="iconCircle"
                       icon="iconfont iconlvli" size="mini"
                       :type="null" :title="$t('enterpriseInfoManage.supplierInfoManage.returnAddressEdit.showRecord')"
                       @click="showView(scope.row)" :menuCode="menuId" perms="addressVitae" :openPerms="true">
          </auth-button>
        </template>
      </el-table-column>
    </data-table>
    <resume-mailing-address :visible.sync="editDialogVisible" :form="editDialogItem" :editModel="editDialogeditModel"></resume-mailing-address>
  </div>
</template>

<script>
import BasePage from '@/pages/basePage'
import { DataTable, authButton, ExpandCollapse } from 'newepoch-components'
import * as format from '@/filters/index'
import resumeMailingAddress from '@/pages/enterpriseInfoManage/supplierInfoManage/resumeMailingAddress.vue'
import supplierInfoManageApi from '@/api/enterpriseInfoManage/supplierInfoManageApi.js'
import storage from '@/utils/storage'
export default {
  extends: new BasePage(),
  name: 'returnAddressEdit',
  components: {
    DataTable,
    authButton,
    ExpandCollapse,
    resumeMailingAddress
  },
  data () {
    return {
      editDialogVisible: false,
      editDialogItem: {},
      editDialogeditModel: 'V',
      sourceData: [],
      queryParas: {
        enterpriseId: ''
      },
      columns: [
        {
          // 区域
          prop: 'district',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.returnAddressEdit.area,
          width: '150px',
          slot: true
        },
        {
          // 登录账号
          prop: 'account',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.returnAddressEdit.loginAccount,
          width: '150px'
        },
        {
          // 联系人
          prop: 'linkmanName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.returnAddressEdit.contact,
          width: '100px',
          slot: true
        },
        {
          // 地址标签
          prop: 'addressTag',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.returnAddressEdit.addressTag,
          format: (row) => {
            return format.formatDict(row.addressTag, 'address_tag')
          },
          width: '100px'
        },
        {
          // 回寄地址
          prop: 'detailedAddress',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.returnAddressEdit.returnAddress,
          width: '300px'
        },
        {
          // 收件人
          prop: 'addressee',
          align: 'left',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.returnAddressEdit.addressee,
          width: '100px'
        },
        {
          // 手机号码
          prop: 'telephone',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.returnAddressEdit.phoneNumber,
          width: '150px'
        },
        {
          // 座机号码
          prop: 'tel',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.returnAddressEdit.landlineNum,
          width: '150px'
        },
        {
          // 是否默认地址
          prop: 'defaultFlag',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.returnAddressEdit.isDefAddress,
          format: (row) => {
            return format.formatDict(row.defaultFlag, 'ZD0003')
          },
          width: '100px'
        }
      ]
    }
  },
  computed: {
    api () {
      return supplierInfoManageApi.invoiceListApi
    },
    menuId () {
      return storage.getLocal('params').menuId
    }
  },
  mounted () {
    this.queryParas.enterpriseId = storage.getLocal('params').enterpriseId
    this.handleFilter()
  },
  activated () {
    this.queryParas.enterpriseId = storage.getLocal('params').enterpriseId
    this.handleFilter()
  },
  methods: {
    getTableData (data) {
      data.forEach(it => {
        this.$set(it, 'area1', [])
        if (it.area) {
          it.area.forEach(it1 => {
            it.area1.push({ district: it1 })
          })
        }
      })
      this.sourceData = JSON.parse(JSON.stringify(data))
    },
    // 查看履历
    showView (data) {
      this.editDialogItem = Object.assign({}, data)
      this.editDialogeditModel = 'V'
      this.editDialogVisible = true
    }
  }
}
</script>

<style scoped lang="scss" src="@/styles/enterpriseInfoManage/supplierInfoManage/enterpriseInvoiceInfo.scss">
</style>
