<template>
  <div class="business-manage">
    <ol class="breadcrumb">
      <li>业务管理</li>
    </ol>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
      <el-tab-pane label="待我处理" name="pending"></el-tab-pane>
      <el-tab-pane label="我已处理" name="completed"></el-tab-pane>
      <el-tab-pane label="全部" name="all"></el-tab-pane>
      <el-tab-pane label="历史" name="history"></el-tab-pane>
      <div class="tempalte-content">
        <div class="search">
          <div class="left">
            <div v-power="'addBusiness'"  v-if="activeName === 'pending'">
              <el-button type="primary" @click="modifyClick('create')">新建业务</el-button>
            </div>
          </div>
          <div class="right">
            <div v-if="activeName === 'all'">
              <el-select
                v-model="search.statusId"
                placeholder="请选择业务状态"
                clearable
                style="width: 100%"
              >
                <el-option v-for="item in getStatusList" :key="item.id"
                  :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </div>
            <div>
              <el-input v-model.trim="search.fastSearch" placeholder="请输入业务编号/业务名称/核心企业名称/贸易平台/供应商名称" style="width: 410px" clearable></el-input>
            </div>
            <div class="leftBtn">
              <el-button type="primary" @click="fetchData('search')">查询</el-button>
            </div>
          </div>
        </div>
        <div class="table-box">
          <el-table v-loading="loading" :data="tableData" :key="tableKey"  height="calc(100vh - 0.85rem - 220px)">
            <el-table-column type="index" label="序号"  width="50"></el-table-column>
            <el-table-column prop="业务编号" label="业务编号">
              <template slot-scope="{row}">
                <el-tooltip effect="dark"  :content="row.businessNumber" placement="top-start">
                  <span class="one-ellipsis">{{ row.businessNumber }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="businessName" label="业务名称">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" :content="row.businessName" placement="top-start">
                  <span class="one-ellipsis">{{ row.businessName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="customerName" label="核心企业名称" width="120">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" :content="row.customerName" placement="top-start">
                  <span class="one-ellipsis">{{ row.customerName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="platformName" label="贸易平台名称" width="120">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" :content="row.platformName" placement="top-start">
                  <span class="one-ellipsis">{{ row.platformName }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="supplierName" label="供应商名称" width="120">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" width="200"  :content="row.supplierName" placement="top-start">
                  <div class="one-ellipsis" style="width: 120px">{{ row.supplierName }}</div>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="mode" label="保证方式" v-if="activeName !== 'history'"></el-table-column>
            <el-table-column prop="stage.name" label="当前阶段" width="160" v-if="activeName !== 'history'"></el-table-column>
            <el-table-column prop="executor" label="执行人" v-if="activeName !== 'history'">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" :content="row.executor" placement="top-start">
                  <span class="one-ellipsis">{{ row.executor }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="status.name" label="状态"></el-table-column>
            <el-table-column label="操作"  width="180">
              <template slot-scope="{row}">
                <el-tooltip effect="dark" content="时间进度轴" placement="top"  v-if="activeName !== 'history' ">
                  <i class="iconfont icon-timeAxis" @click="timeAxisClick(row)"></i>
                </el-tooltip>
                <el-tooltip effect="dark" content="查看" placement="top">
                  <i class="iconfont icon-Magnifier" @click="modifyClick('see', row)"></i>
                </el-tooltip>
                <el-tooltip
                  effect="dark"
                  v-if="activeName !== 'history' && getBtnName(row.stage.code)"
                  :content="`处理${getBtnName(row.stage.code)}`"
                  placement="top"
                >
                  <i
                    class="iconfont icon-xiugai"
                    @click="modifyClick(row)"
                    v-if="activeName === 'pending'"
                  >
                  </i>
                </el-tooltip>
                <el-tooltip  v-if="activeName === 'all'"  effect="dark" content="移交" placement="top">
                  <i class="iconfont icon-icon_yijiao" v-power="'transferBusiness'" @click="transferClick(row)"></i>
                </el-tooltip>
                <el-tooltip v-power="'deleteBusiness'" effect="dark" v-if="activeName !== 'history' && row.delete" content="删除" placement="top">
                  <i class="iconfont icon-shanchu" @click="deleteClick(row)"></i>
                </el-tooltip>
                <el-tooltip v-power="'downloadAllBusinessFile'" effect="dark" v-if="activeName === 'all' && row.downloadFileFlag"  content="下载" placement="top">
                  <i class="iconfont icon-xiazai" @click="downloadFile(row)"></i>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div v-if="count" class="pagination">
          <el-pagination
            :page-sizes="[10, 20, 30, 50]"
            :page-size="size"
            :total="count"
            :current-page="page"
            layout="slot, total, sizes, prev, pager, next, jumper"
            background
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
          >
          </el-pagination>
        </div>
      </div>
    </el-tabs>
    <cy-dialog title="进度时间轴" ref="timeAxisDialog" class="assets-box" top="15vh">
      <time-axis ref="timeAxis" :time-axis-params="timeAxisParams"></time-axis>
    </cy-dialog>
    <cy-dialog title="选择部门与人员" ref="transferDialog" class="assets-box" top="15vh">
      <cy-org-list ref="cyOrgList"></cy-org-list>
      <div class="submit-btn">
        <el-button type="primary" @click="orgSubmit" style="width: 100px;">确定</el-button>
        <el-button @click="() => { $refs.transferDialog.show = false}" style="width: 100px;">取消</el-button>
      </div>
    </cy-dialog>
  </div>
</template>

<script>
module.exports = {
  name: 'BusinessManage',
  data() {
    return {
      search: {
        fastSearch: '',
        statusId: '',
        difference: 'pending',
        simpleClassName: 'BusinessManagement'
      },
      activeName: 'pending',
      tableKey: 0,
      deepSearch: {},
      page: 1,
      size: 10,
      count: 0,
      loading: false,
      flowData: [
        { name: '业务创建', code:'businessCreateStage', btn: '(修改)' },
        { name: '模板审核', code:'businessTemplateReviewStage', btn: '(模板审核)' },
        { name: '保证方式确认', code:'businessGuaranteeModeStage', btn: '(保证方式)' },
        { name: '保证金收款确认', code:'businessBondCollectionStage', btn: '(收款)' },
        { name: '中标确认', code:'businessAwardStage', btn: '(中标)' },
        { name: '保证金退款确认', code:'businessRefundDepositStage', btn: '(退款)' },
        { name: '无', code:'businessEmptyStage', btn: '' },
      ],
      tableData: [],
      timeAxisParams: {
        businessKey: '',
        businessType: 'BusinessManagement'
      },
      transferRow: {}
    }
  },
  computed: {
    ...window.Vuex.mapGetters(['constant']),
    getBtnName() {
      return (value) => {
        return this.flowData.find(item => item.code === value).btn
      }
    },
    getStatusList() {
      return this.$utils.filterListData(this.constant.projectInitiationStatus, 'project_init_cancelled' )
    }
  },
  activated() {
    this.$store.dispatch('getConstant', ['projectInitiationStatus'])
    this.fetchData()
  },
  methods: {
    fetchData(type) {
      if(type === 'search') {
        this.page = 1
        this.size = 10
        this.deepSearch = JSON.parse(JSON.stringify(this.search))
      }
      if(Object.keys(this.deepSearch).length !== 0) {
        this.search = JSON.parse(JSON.stringify(this.deepSearch))
      }
      this.loading = true
      const params = {
        page: this.page,
        rows: this.size,
        ...this.search,
      }
      if(this.search.difference === 'history') {
        const historyParams = {
          page: this.page,
          rows: this.size,
          condition: this.search.fastSearch
        }
        this.$api.businessManage.getbusinessManageHistoryList(historyParams).then(( { data }) => {
          console.log(data)
          const { rows, records } = data
          this.loading = false
          this.tableData = rows
          this.count = records
        })
      }else {
        this.$api.businessManage.getBusinessManageList(params).then(({ data }) => {
          const { rows, records } = data
          this.loading = false
          this.tableData = rows
          this.count = records
        })
      }

    },
    modifyClick(row, data) {
      if(row === 'create') {
        this.$router.push({ path: 'businessCreate', query: {
            type: 'create',
          }})
      }else if(row === 'see') {
        const { id, taskId } = data
        if(this.activeName === 'history') {
          this.$router.push({ path: 'businessCreate', query: {
            type: 'history',
            id,
            taskId
          }})
        }else {
          this.$router.push({ path: 'businessManageSee', query: {
            businessKey: id,
            taskId,
            type: 'see'
          }})
        }

      }else {
        const { id, taskId, stage: { code } } = row
        if(code === 'businessCreateStage') {
          this.$router.push({ path: 'businessCreate', query: {
            type: 'edit',
            id,
            taskId
          }})
        }else if(code === 'businessTemplateReviewStage') {
          this.$router.push({ path: 'templateExamine', query: {
            type: 'edit',
            businessKey: id,
            taskId
          }})
        }else if(code === 'businessGuaranteeModeStage') {
          this.$router.push({ path: 'pledgeWay', query: {
            businessKey: id,
            taskId
          }})
        }else if(code === 'businessBondCollectionStage') {
          this.$router.push({ path: 'bond', query: {
            businessKey: id,
            taskId
          }})
        }else if(code === 'businessAwardStage') {
          this.$router.push({ path: 'winBidding', query: {
            businessKey: id,
            taskId
          }})
        }else if(code === 'businessRefundDepositStage') {
          this.$router.push({ path: 'refundDeposit', query: {
            businessKey: id,
            taskId
          }})
        }
      }
    },
    timeAxisClick(row) {
      this.timeAxisParams.businessKey = row.id
      this.$refs.timeAxisDialog.show = true
      this.$nextTick(() => {
        this.$refs.timeAxis.fetchData()
      })
    },
    deleteClick(row) {
      this.$confirm('确定删除该笔业务么？', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$api.businessManage.businessManageDelete({ businessBasicInfoId: row.id }).then(() => {
          this.$message.success('删除成功')
          this.fetchData()
        })
      })
    },
    handleTabClick(tab, event) {
      this.search.fastSearch =  ''
      this.search.difference = tab.name
      this.activeName = tab.name
      this.fetchData('search')
      this.tableKey += 1
    },
    // 移交
    transferClick(row) {
      this.transferRow = row
      this.$refs.transferDialog.show = true
      this.$nextTick(() => {
        this.$refs.cyOrgList.initData()
      })
    },
    orgSubmit() {
      const checkedData = this.$refs.cyOrgList.checkedData
      if(!checkedData.length) {
        this.$message.warning('请选择转移人员！')
        return
      }
      const params = {
        Loading: true,
        businessBasicInfoId: this.transferRow.id,
        id:  checkedData[0].id
      }
      this.$api.businessManage.businessManageTransferSubmit(params).then(() => {
        this.$refs.transferDialog.show = false
        this.$message.success('移交成功')
        this.fetchData()
      })
    },
    downloadFile(row) {
      this.$api.businessManage.allDownLoadFile(row.id).then((data) => {
        this.$utils.exportFiles(data)
      })
    },
    handleSizeChange(val) {
      // 公共分页每页显示条数
      this.size = val
      this.page = 1
      this.fetchData()
    },
    handleCurrentChange(val) {
      // 公共分页页码事件
      this.page = val
      this.fetchData()
    },
  },

}
</script>

<style scoped>
.el-tabs--border-card>.el-tabs__content {
  padding: 0px;
}
</style>
