<template>
  <div class="prequalification" v-loading="isLoading">
    <cy-up-down-drag>
      <div slot="top">
        <cy-steps :stepsData="stepList"></cy-steps>
        <el-collapse v-if="stepList.length" v-model="activeNames" @change="handleChange">
          <el-collapse-item v-for="(item, index) in stepList" :id="index" :key="index" :name="index">
            <template slot="title">
              <cy-view-bar
                :view-bar-data="{ ...item.businessProcessingLogVo, formBusinessName: item.formBusinessName, index: index + 1 }">
              </cy-view-bar>
            </template>
            <template v-if="item.formBusinessName == '录入结算单'">
              <add :info="item.obj"></add>
            </template>
            <template v-if="item.formBusinessName == '法务审核' || item.formBusinessName == '单价变更审核'">
              <audit :info="item.obj"></audit>
            </template>
            <template v-if="item.formBusinessName == '签署结算单'">
              <sign :info="item.obj"></sign>
            </template>
            <template v-if="item.formBusinessName == '单价调整'">
              <edit :info="item.obj"></edit>
            </template>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div slot="bar">
        <div>
          {{ $route.query.type.includes('单价变更') ? '单价调整审核' : '结算单审核' }}
        </div>
      </div>
      <div slot="bottom">
        <div class="tempalte-content" style="min-height: auto; padding: 0px 20px ">
          <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="150px" label-position="top" class="rule-form-orange">
            <cy-info-title>上游结算单</cy-info-title>
            <el-form-item
              label="上游结算单："
              prop="desc"
              style="width: 100%;"
              class="form-required"
            >
              <cy-upload
                ref="fileStorage"
                :upload-params="uploadParams"
                :file-data="file"
                :upload-from-orange-status="true"
                disabled
                placeholder="请上传上游结算单"
              />
            </el-form-item>
            <cy-info-title>审批结论</cy-info-title>
            <el-form-item label="审批结论" prop="approvalConclusion">
              <el-radio-group v-model="ruleForm.approvalConclusion">
                <el-radio label="pass">通过</el-radio>
                <el-radio label="back">退回</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="审批意见" prop="approvalComment" style="width: 100%;" :rules="[{ required: ruleForm.approvalConclusion == 'back', trigger: 'blur', message: '请输入审批意见' }]">
              <el-input
                v-model="ruleForm.approvalComment"
                placeholder="请输入审批意见"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="submit-btn">
            <el-button style="width: 150px;" @click="() => { $router.go(-1) }">取消</el-button>
            <el-button type="primary" style="width: 150px;" @click="confirm">确定</el-button>
          </div>
        </div>
      </div>
    </cy-up-down-drag>
  </div>
</template>

<script>
import request from '@/utils/request'
import collapseSeeMix from '@/mixins/collapseSeeMix'
import Add from './components/add'
import audit from './components/audit'
import sign from './components/sign'
import edit from './components/edit'
export default {
  name: 'SettlementEdit',
  mixins: [collapseSeeMix],
  data() {
    return {
      uploadParams: {},
      file: [],
      ruleForm: {
        approvalConclusion: '',
        approvalComment: ''
      },
      rules: {
        approvalConclusion: [{ required: true, trigger: 'change', message: '请选择审批结论' }]
      },
      isLoading: false,
      stepList: [],
      activeNames: []
    }
  },
  components: {
    Add, audit, sign, edit
  },
  mounted() {
    this.getDetail()
    this.getStepList()
  },
  methods: {
    getStepList() {
      this.isLoading = true
      request({
        url: '/businessProcessingTask/doBusinessHistoryView',
        method: 'get',
        params: { businessKey: this.$route.query.infoId, businessType: 'BillBasicInformation' }
      }).then(({ data }) => {
        data.forEach(item => {
          if(item.obj) {
            item.obj.mathId = Math.random()
          } else {
            item.obj = { mathId: Math.random() }
          }
        })
        this.stepList = data || []
        this.isLoading = false
      })
    },
    getDetail() {
      request({
        url: '/bill/approval',
        method: 'get',
        params: {
          taskId: this.$route.query.taskId,
          businessKey: this.$route.query.infoId
        }
      }).then(({ data: { file } }) => {
        this.file = file ? [...file] : []
      })
    },
    submit() {
      this.isLoading = true
      let data = new FormData()
      data.append('taskId', this.$route.query.taskId)
      data.append('settlementBasicInfoId', this.$route.query.infoId)
      data.append('approvalComment', this.ruleForm.approvalComment)
      data.append('approvalConclusion', this.ruleForm.approvalConclusion)
      request({
        url: '/bill/financeReview',
        method: 'post',
        data
      }).then(() => {
        this.$message.success('提交成功')
        this.isLoading = false
        this.$router.go(-1)
      }, () => {
        this.isLoading = false
      })
    },
    confirm() {
      this.$refs.ruleForm.validate(flag => {
        if(flag) {
          this.submit()
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  /* .template-examine .submit-btn {
    position: absolute;
    bottom: 40px;
    right: 40px;
  } */
</style>
