<template>
  <div class="business-main">
    <div class="title">
      <div class="name">
        企业项目
      </div>
      <el-button type="primary" icon="el-icon-plus" @click="handlerClick('add')">新增供应商企业</el-button>
    </div>
    <div v-for="(item, index) in companyList" :key="index">
      <div class="company-box">
        <div class="company-title">
          <div>
            <div class="supplier">供应商企业名称</div>
            <div class="supplier-name">{{ item.enterprise && item.enterprise.corporateName }}</div>
          </div>
          <div class="supplier-operation">
            <svg-button
              v-if="item.status === 'c_supplier_status_10'"
              icon="bAdd"
              @click="handlerOptions('MyBusinessVideoDueDiligence', 'video')"
            >
              视频申诉
            </svg-button>
            <svg-button
              v-if="item.status === 'c_supplier_status_9'"
              icon="bAdd"
              @click="handlerOptions('MyBusinessOfflineDueDiligence', item)"
            >
              尽调预约
            </svg-button>
            <svg-button
              v-if="item.status === 'c_supplier_status_1'"
              icon="bAdd"
              @click="handlerOptions('GuaranteeEnterprise', item)"
            >
              担保企业
            </svg-button>
            <svg-button
              v-if="addProjectList.includes(item.status)"
              icon="bAdd"
              @click="handlerOptions('MyBusinessProjectInfo', item)"
            >
              添加项目
            </svg-button>
            <svg-button
              v-if="item.status !== 'c_supplier_status_2'"
              icon="see"
              :svg-style="{width: '30px', height: '30px'}"
              @click="handlerClick('see', item)"
            >
              查看供应商
            </svg-button>
            <svg-button
              v-if="item.status === 'c_supplier_status_2'"
              icon="bAdd"
              @click="handlerOptions('MyBusinessSupplementaryInfo', item)"
            >
              补充信息
            </svg-button>
          </div>
        </div>
        <div class="normal">
          当前状态：{{ item.statusStr }}
        </div>
        <div v-if="item.creditLimit" class="normal">
          授信金额（万元）：{{ item.creditLimit }}
        </div>
        <div v-if="item.reason" class="normal">
          退回原因：{{ item.reason }}
        </div>
      </div>
      <cy-collapse :is-launch="index===0" @click.native="getCompanyList(item.id, index)">
        <cy-comm-table
          style="margin-top: 20px; width: 100%"
          :columns="columns"
          :data="item.tableData"
          :count="0"
        />
      </cy-collapse>
    </div>
    <el-empty v-if="!companyList.length" description="暂无数据" />
  </div>
</template>

<script>
import { getBusinessList, getCompanyOfBusinessList } from '@/api/myBusiness/businessMain'
export default {
  data() {
    return {
      companyList: [],
      tableData: [
        { userName: '1111', statusName: '2131231' },
        { userName: '1111', statusName: '2131231' }
      ],
      columns: [
        {
          label: '序号',
          index: true
        },
        {
          label: '业务编号',
          prop: 'businessNumber',
          showTooltip: true
        },
        {
          label: '项目名称',
          showTooltip: true,
          prop: 'projectName'
        },
        {
          label: '项目业主方',
          showTooltip: true,
          prop: 'ownerName'
        },
        {
          label: '核心企业名称',
          showTooltip: true,
          prop: 'coreEnterpriseName'
        },
        {
          label: '项目审核状态',
          prop: 'projectStatusStr'
        },
        {
          label: '核心企业审核状态',
          prop: 'coreEnterpriseStatusStr'
        },
        {
          label: '操作',
          render: (h, row) => {
            let btnList = []
            if (row.coreEnterpriseStatusStr === '补充信息') {
              btnList = [
                { msg: '补充', icon: 'el-icon-edit', power: 'projectNumber:delete', category: 'edit' }
              ]
            } else if (row.coreEnterpriseStatusStr === '未通过' && row.projectStatusStr === '补充信息') {
              btnList = [
                { msg: '补充', icon: 'el-icon-edit', power: 'projectNumber:delete', category: 'edit' }
              ]
            } else {
              btnList = [
                { msg: '查看', icon: 'iconfont icon-orange icon-a-Group957', power: 'projectNumber:delete', category: 'see' }
              ]
            }
            const options = btnList.map(item => {
              return (
                // this.tablePower({ item, row }) &&
                <el-tooltip class='item' effect='dark' content={item.msg} placement='top'>
                  <span class='table-icon-box'>
                    <i class={item.icon} onClick={() => { this.detailClick(item.category, row) }}></i>
                  </span>
                </el-tooltip>
              )
            })
            return <div>{ options }</div>
          },
          width: 150
        }],
      addProjectList: ['c_supplier_status_2 ', 'c_supplier_status_3', 'c_supplier_status_4', 'c_supplier_status_5', 'c_supplier_status_6', 'c_supplier_status_7', 'c_supplier_status_8']
    }
  },
  computed: {
    tablePower() {
      return ({ item, row }) => {
        const { rowPower } = item
        if (rowPower) {
          if (rowPower.includes(row.projectStatusStr)) {
            return true
          }
        } else {
          return true
        }
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      getBusinessList().then(({ data }) => {
        this.companyList = data.map(item => {
          return {
            ...item,
            tableData: [],
            flag: true
          }
        })

        // 首个默认展开
        if (this.companyList.length) {
          this.getCompanyList(this.companyList[0].id, 0)
        }
      })
    },
    getCompanyList(id, index) {
      if (this.companyList[index].flag) {
        this.companyList[index].flag = false
        const params = {
          supplierId: id
        }
        getCompanyOfBusinessList(params).then(({ data }) => {
          this.companyList[index].tableData = data
        })
      }
    },
    handlerClick(type, row = {}) {
      const { constructionIndustry } = row
      if (type === 'add' || type === 'see' && !constructionIndustry) {
        this.$router.push({
          name: 'SupplierEnterprise',
          params: { id: type },
          query: {
            id: row.id
          }
        })
      } else if (type === 'see' && constructionIndustry) {
        this.$router.push({
          name: 'MyBusinessSupplementaryInfoSee',
          params: { id: type },
          query: {
            id: row.id
          }
        })
      }
    },
    handlerOptions(name, row) {
      if (name === 'MyBusinessProjectInfo') {
        this.$router.push({
          name,
          params: { id: 'add' },
          query: {
            id: row.id,
            enterpriseName: row.enterprise.corporateName
          }
        })
      } else {
        this.$router.push({
          name,
          params: { id: 'add' },
          query: {
            id: row.id
          }
        })
      }
    },
    detailClick(type, row) {
      if (type === 'edit') { // 补充信息
        this.$router.push({
          path: '/myBusiness/projectSupplement/child',
          query: {
            id: row.id
          }
        })
      } else {
        this.$router.push({
          path: '/myBusiness/admittanceDetail/child',
          query: {
            id: row.id
          }
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.business-main {
  color: #222931;
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .name {
      font-size: 24px;
      font-weight: 700;

    }
  }
  .company-box {
    width: 100%;
    padding: 20px;
    background: #F5F6F6;
    margin-top: 20px;
    .company-title {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      margin-bottom: 10px;
      .supplier {
        color: #A3A8AC;
        font-size: 14px;
      }
      .supplier-name {
        color: #222931;
        font-size: 20px;
        font-weight: 700;
        margin-top: 10px;
      }
      .supplier-operation {
        display: flex;
        & > .svg-button {
          margin-left: 40px;
        }
      }
    }
    .normal {
      color: #222931;
      font-size: 16px;
      margin-top: 20px;
    }
  }
}
</style>
