<!-- 供应商信息管理--主账号详情 -->
<template>
  <div>
    <dialog-edit :visible.sync="dialogVisible" :editModel="editModel" :form="form" :api="api" labelWidth="80px"
                 :title="$t('enterpriseInfoManage.supplierInfoManage.accountDetailsHead')">
      <el-row>
        <el-col :xs="24" :sm="24" :md="24" :lg="22" class="account-form">
          <el-form-item :label="$t('enterpriseInfoManage.supplierInfoManage.PAN')">
            <el-input v-model="form.loginAccountName" :disabled="disabled" class="text-width dymForm"></el-input>
          </el-form-item>
        </el-col>
        <el-col :xs="24" :sm="24" :md="24" :lg="2" class="text-position">
          <auth-button type="primary" size="medium" :label="$t('common.edit')" @click="edit"></auth-button>
        </el-col>
      </el-row>
      <el-form :model="formList" ref="formList" :show-message="false">
        <data-table :api="api" :operateBtnLayout="operateBtnLayout" :loadCount.sync="loadCount" :columns="columns" :showPage="showPage"
                    :queryParas="queryParas" :sourceData="formList.sourceData" :showSelection="showSelection" @selectRowChange="selectRowChange">
          <!-- (子账号)登录账号 -->
          <el-table-column :label="$t('enterpriseInfoManage.supplierInfoManage.childAccount')" align="center" >
            <template slot-scope="scope">
              <el-form-item :prop="'sourceData.' + scope.$index + '.childAccount'" class="table-column-form">
                <!-- (子账号)登录账号 下拉组件 -->
                <select-child-account v-if="scope.row.status" v-model="scope.row.childAccountId"></select-child-account>
                <span v-else>{{scope.row.childAccountName}}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- 区域 -->
          <el-table-column :label="$t('enterpriseInfoManage.supplierInfoManage.area')" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'sourceData.' + scope.$index + '.area'" class="table-column-form">
                <!-- 区域 下拉组件 -->
                <select-area v-if="scope.row.status" v-model="scope.row.areaId"></select-area>
                <span v-else>{{scope.row.areaName}}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- 联系人 -->
          <el-table-column :label="$t('enterpriseInfoManage.supplierInfoManage.contact')" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'sourceData.' + scope.$index + '.contact'" class="table-column-form">
                <!-- 联系人 下拉组件 -->
                <select-contact v-if="scope.row.status" v-model="scope.row.contactId"></select-contact>
                <span v-else>{{scope.row.contactName}}</span>
              </el-form-item>
            </template>
          </el-table-column>
          <!-- 手机号码 -->
          <el-table-column :label="$t('enterpriseInfoManage.supplierInfoManage.mobilePhone')" align="center">
            <template slot-scope="scope">
              <el-form-item :prop="'sourceData.' + scope.$index + '.mobilePhone'" class="table-column-form">
                <el-input v-if="scope.row.status" v-model.number="scope.row.mobilePhone" class="dymForm"></el-input>
                <span v-else>{{scope.row.mobilePhone}}</span>
              </el-form-item>
            </template>
          </el-table-column>
        </data-table>
      </el-form>
    </dialog-edit>
  </div>
</template>

<script>
import BaseEdit from '@/pages/baseEditPage'
import { DialogEdit, DataTable, authButton } from 'newepoch-components'
import supplierInfoManageApi from '@/api/enterpriseInfoManage/supplierInfoManageApi.js'
import SelectArea from '@/components/element/enterpriseInfoManage/SelectArea.vue'
import SelectContact from '@/components/element/enterpriseInfoManage/SelectContact.vue'
import SelectChildAccount from '@/components/element/enterpriseInfoManage/SelectChildAccount.vue'
export default {
  extends: new BaseEdit(),
  name: 'accountDetailsEdit',
  components: {
    DialogEdit,
    DataTable,
    authButton,
    SelectArea,
    SelectContact,
    SelectChildAccount
  },
  data () {
    return {
      disabled: true,
      showSelection: true,
      showPage: false,
      operateBtnLayout: '',
      loadCount: 0,
      queryParas: {
        accountName: ''
      },
      selectedRows: [],
      formList: {
        sourceData: []
      },
      columns: [
        // 供应商
        {
          prop: 'supplierName',
          align: 'center',
          label: this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.supplierName
        }
      ]
    }
  },
  computed: {
    api () {
      return supplierInfoManageApi.accountApi
    }
  },
  methods: {
    // 复选框勾选数据
    selectRowChange (val) {
      this.selectedRows = val
    },
    // 加载账号详情数据
    loadData (paras) {
      let $this = this
      $this.api.getList(paras).then(res => {
        if (res && res.data) {
          res.data.forEach(it => {
            it.status = false
          })
          $this.formList.sourceData = res.data
        }
      })
    },
    // 编辑
    edit () {
      if (this.selectedRows.length === 0) {
        this.warning(this.$i18n.messages[this.$i18n.locale].enterpriseInfoManage.supplierInfoManage.editTip)
      } else {
        this.selectedRows.forEach(it => {
          it.status = true
        })
      }
    }
  },
  watch: {
    visible (val) {
      let $this = this
      if (val) {
        $this.$nextTick(() => {
          $this.queryParas.accountName = $this.form.loginAccountName
          $this.loadData($this.queryParas)
        })
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import '~@/styles/enterpriseInfoManage/supplierInfoManage/accountDetailsEdit.scss';
</style>
