<template>
  <div class="payment-account">
    <cy-info-title>
      付款方账户信息<span v-if="clientType === 'C'">（用于接收回款的银行账户名称）</span>
      <template v-if="$route.query.type !== 'see'" slot="right">
        <el-button type="text" @click="tableOptionsClick('add')">新增</el-button>
      </template>
    </cy-info-title>
    <div class="table-box">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" label="序号" width="200" />
        <el-table-column v-if="$route.query.type === 'see'" prop="silentAccountNumber" label="账户编号" />
        <el-table-column v-if="$route.query.type === 'see'" prop="accountName" label="账户名称" />
        <el-table-column v-if="$route.query.type === 'see'" prop="balance" label="余额">
          <template slot-scope="scope">
            <cy-amount-input v-model="scope.row.balance" :disabled="disabled" />
          </template>
        </el-table-column>
        <el-table-column prop="name" label="付款方银行账户名称">
          <template slot-scope="scope">
            <custom-select
              :value.sync="scope.row.payerAccountName"
              :disabled="disabled"
              :clearable="false"
              placeholder="输入付款方银行账户名称"
              @search-click="searchClick"
              @search-change="(val) => { searchChange(val, scope.$index) }"
            >
              <el-option
                v-for="item in listData"
                :key="item.corporateName"
                :label="item.corporateName"
                :value="item.corporateName"
                :disabled="tableData.some(el => el.payerAccountName === item.corporateName)"
              />
            </custom-select>
          </template>
        </el-table-column>
        <el-table-column v-if="$route.query.type !== 'see'" prop="address" label="操作" width="200">
          <template slot-scope="scope">
            <!-- <el-button v-if="scope.$index === tableData.length - 1" type="text" @click="tableOptionsClick('add')">新增</el-button> -->
            <!-- v-if="tableData.length > 1" -->
            <el-button
              type="text"
              @click="tableOptionsClick('delete', scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getEnterpriseInspectionInfo } from '@/api/dictionary'

export default {
  name: 'CyAccountaccountDetails',
  components: {
    CustomSelect: () => import('@/components/CustomSelect/index.vue')
  },
  props: {
    detailsInfo: {
      type: Array,
      default: () => []
    },
    // 客户端类型
    clientType: {
      type: String,
      default: '', // C  C端， B  B端
      required: true
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tableData: [
        { payerAccountName: '' }
      ],
      listData: [],
      deleteSilentIds: [] // 删除的静默户的id
    }
  },
  watch: {
    detailsInfo: {
      handler(val) {
        if (val && val.length) {
          this.tableData = val
          console.log(this.tableData)
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    searchClick(val) {
      getEnterpriseInspectionInfo({
        keyword: val
      }).then(({ data }) => {
        this.listData = data
      })
    },
    searchChange(val, index) {
      const obj = this.listData.find((item) => item.corporateName === val)
      if (!obj) return
      this.tableData[index].payerAccountName = obj.corporateName
    },
    tableOptionsClick(type, index, row) {
      if (type === 'add') {
        this.tableData.push({ payerAccountName: '' })
      } else if (type === 'delete') {
        if ('balance' in row && row.balance > 0) {
          this.$message.warning('付款方余额不为空，不能删除')
          return
        }
        if (row.id) {
          this.deleteSilentIds.push(row.id)
          this.tableData.splice(index, 1)
          // this.$confirm('您将删除该静默户，删除后无法恢复。请确认是否继续？', '删除静默户', {
          //   confirmButtonText: '删除',
          //   cancelButtonText: '保留',
          //   type: 'warning'
          // }).then(() => {
          //   this.deleteSilentIds.push(row.id)
          //   this.tableData.splice(index, 1)
          // }).catch(() => {})
        } else {
          this.tableData.splice(index, 1)
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped></style>
