<!--批产合同信息-->
<template>
  <div class="info-block">
    <el-row class="table-title">
      <el-col :span="7"><div class="title-header"><i class="el-icon-menu"/>基本信息</div></el-col>
      <el-button class="edit_btn" size="small" @click="editbase">编辑基本信息</el-button>
    </el-row>
    <el-form :model="info" label-well-code="right" label-width="100px" class="table" size="small">
      <el-row :gutter="20" >
        <el-col :span="7" >
          <el-form-item label="合同编号">
            <el-input v-model.trim="info.contractNumber" :disabled="true" type="text" />
          </el-form-item>
          <el-form-item label="合同名称">
            <el-input v-model.trim="info.contractName" :disabled="true" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="7" >
          <el-form-item label="主要内容">
            <el-input v-model.trim="info.contractContent" :disabled="true" type="textarea" rows = "4" />
          </el-form-item>
        </el-col>
        <el-col :span="7" >
          <el-form-item label="备注">
            <el-input v-model.trim="info.description" :disabled="true" type="textarea" rows = "4" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="7">
          <el-form-item label="合同金额">
            <el-input v-model.trim="info.contractAmount" :disabled="true" type="text" >
              <template slot="append">万元</template>
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="7" >
          <el-form-item label="合同乙方">
            <el-input v-model.trim="info.contractFactory" :disabled="true" type="text" />
          </el-form-item>
        </el-col>
        <el-col :span="7" >
          <el-form-item label="负责人">
            <el-input v-model.trim="info.principal" :disabled="true" type="text" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="table-title">
      <el-col :span="7"><div class="title-header"><i class="el-icon-menu"/>内网流程</div></el-col>
      <el-button class="edit_btn" size="small" @click="editflow">编辑内网流程</el-button>
    </el-row>
    <el-form :model="info" label-well-code="right" label-width="100px" class="table" size="small">
      <el-row :gutter="20" >
        <el-col :span="7" >
          <el-form-item label="外协项目申请">
            <el-select v-model="info.externalProjectApply" :disabled="true" placeholder="外协项目申请" clearable value="">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" >
        <el-col :span="7" >
          <el-form-item label="外协合同申请">
            <el-select v-model="info.externalContractApply" :disabled="true" placeholder="外协合同申请" clearable value="">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" >
        <el-col :span="7" >
          <el-form-item label="外协验收申请">
            <el-select v-model="info.externalCheckApply" :disabled="true" placeholder="外协验收申请" clearable value="">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"/>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-row class="table-title">
      <el-col :span="7"><div class="title-header"><i class="el-icon-menu"/>付款流程</div></el-col>
      <el-button class="edit_btn" size="small" @click="addpay">新增付款流程</el-button>
    </el-row>

    <el-table v-loading="listLoading1" :data="payList" class="table" border>
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column v-for="column in paycolumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
        <template slot-scope="scope">
          <span :class="column.class">{{ scope.row[column.value] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="editpay(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row class="table-title">
      <el-col :span="7"><div class="title-header"><i class="el-icon-menu"/>报销流程</div></el-col>
      <el-button class="edit_btn" size="small" @click="addreimburse">新增报销流程</el-button>
    </el-row>

    <el-table v-loading="listLoading2" :data="reimburseList" class="table" border>
      <el-table-column align="center" type="index" label="序号" width="55"/>
      <el-table-column v-for="column in reimbursecolumns" :key="column.value" :label="column.text" :width="column.width" :align="column.align" show-overflow-tooltip>
        <template slot-scope="scope">
          <span :class="column.class">{{ scope.row[column.value] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" width="100">
        <template slot-scope="scope">
          <el-button type="text" @click="editreimburse(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <edit-contract v-show="visibleOne" ref="editcontract" @watchChild="fetchBaseDetail"/>
    <edit-flow v-show="visibleTwo" ref="editflow" @watchChild="fetchBaseDetail"/>
    <edit-pay v-show="visibleThree" ref="editpay" @watchChild="fetchData"/>
    <edit-reimburse v-show="visibleFour" ref="editreimburse" @watchChild="fetchData"/>
  </div>
</template>
<script>
import editContract from '@/views/contractManager/editContract'
import editFlow from '@/views/contractManager/editFlow'
import editPay from '@/views/contractManager/editPay'
import editReimburse from '@/views/contractManager/editReimburse'
import { getContractDetail, getPaymentsList, getReimburseList } from '@/api/contract'
export default {
  name: 'CheckContract',
  components: { editContract, editFlow, editPay, editReimburse },
  data() {
    return {
      info: {
        id: '',
        description: '',
        isover: '',
        contractName: '',
        contractNumber: '',
        contractContent: '',
        contractAmount: '',
        contractFactory: '',
        principal: '',
        externalCheckApply: '',
        externalContractApply: '',
        externalProjectApply: ''
      },
      options2: [{
        value: '0',
        label: '未提交'
      }, {
        value: '1',
        label: '流程中'
      }, {
        value: '2',
        label: '已完成'
      }],
      options1: [{
        value: '1',
        label: '流程中'
      }, {
        value: '2',
        label: '已完成'
      }],
      token: '?token=' + this.$store.getters.token, // token
      visibleOne: false,
      visibleTwo: false,
      visibleThree: false,
      visibleFour: false,
      paycolumns: [
        {
          text: '第几次付款',
          value: 'reorder',
          align: 'center'
        },
        {
          text: '付款金额(万元)',
          value: 'money',
          align: 'center'
        },
        {
          text: '经手人',
          value: 'handler',
          align: 'center'
        },
        {
          text: '付款时间',
          value: 'paytimeFmt',
          // value: 'paytime',
          align: 'center'
        }],
      reimbursecolumns: [
        {
          text: '第几次报销',
          value: 'reorder',
          align: 'center'
        },
        {
          text: '报销金额(万元)',
          value: 'money',
          align: 'center'
        },
        {
          text: '经手人',
          value: 'handler',
          align: 'center'
        },
        {
          text: '报销时间',
          value: 'paytimeFmt',
          // value: 'reimburseTime',
          align: 'center'
        }],
      options: ['未提交', '流程中', '已完成'],
      id: '',
      payList: [],
      reimburseList: [],
      listLoading1: true, // 加载动画
      listLoading2: true // 加载动画
    }
  },
  created() {
    this.id = this.$route.params.id
    this.fetchBaseDetail()
    this.fetchData()
  },
  activated() {
  },
  methods: {
    editreimburse(row) {
      this.visibleFour = true
      this.$refs.editreimburse.initDialog('update', this.visibleFour, row)
    },
    editpay(row) {
      this.visibleThree = true
      this.$refs.editpay.initDialog('update', this.visibleThree, row)
    },
    addreimburse() {
      this.visibleFour = true
      this.$refs.editreimburse.initDialog('create', this.visibleFour, this.id)
    },
    addpay() {
      this.visibleThree = true
      this.$refs.editpay.initDialog('create', this.visibleThree, this.id)
    },
    fetchData() {
      this.listLoading1 = true
      this.listLoading2 = true
      console.log(this.id)
      getPaymentsList(this.id).then(response => {
        console.log(response)
        this.payList = response.data
        this.listLoading1 = false
      }).catch((e) => {
        console.log('查付款list报异常')
        console.log(e)
      })
      getReimburseList(this.id).then(response => {
        this.reimburseList = response.data
        this.listLoading2 = false
      }).catch((e) => {
        console.log('查报销list报异常')
        console.log(e)
      })
    },
    fetchBaseDetail() {
      getContractDetail(this.id).then(response => {
        // 处理response数据
        if (response.code === 200) {
          const data = response.data
          this.info = {
            id: data.id,
            isover: data.isover,
            description: data.description,
            contractName: data.contractName,
            contractNumber: data.contractNumber,
            contractContent: data.contractContent,
            contractAmount: data.contractAmount,
            contractFactory: data.contractFactory,
            principal: data.principal,
            externalCheckApply: data.externalCheckApply,
            externalContractApply: data.externalContractApply,
            externalProjectApply: data.externalProjectApply
          }
        }
      }).catch((e) => {
        console.log('查基本信息抛异常')
        console.log(e)
      })
    },

    editbase() {
      this.visibleOne = true
      this.$refs.editcontract.initDialog('update', this.visibleOne, this.info)
    },
    editflow() {
      this.visibleTwo = true
      this.$refs.editflow.initDialog('update', this.visibleTwo, this.info)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  $left-width: 160px;
  .info-block{
    margin: 10px 20px;
    padding-bottom: 100px;
    .edit_btn{
      float:right;
      margin:7px 3px;//为了需要居中显示margin-top和bottom要用$tableTitleHeight减去按钮原高度除以2
    }
    $tableTitleHeight:46px;
    .table{
      margin-top: 15px;
    }
    .table-item{
      margin-bottom: 10px;
    }

    .table-title{
      background-color:rgba(243, 243, 243, 1);
      height: $tableTitleHeight;
      .title-header{
        line-height:$tableTitleHeight;
        color: #606266;
        font-size: 15px;
        i{
          margin-left: 5px;
          margin-right: 5px;
        }
      }
    }
  }
</style>