<template>
  <div class="app-container form-box" style="padding:20px">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-card class="top15 ">
        <div class="table-card">
          <el-row type="flex" justify="space-around">
            <el-col :span="8"></el-col>
            <el-col :span="8" class="formTitle"> {{title}}</el-col>
            <el-col :span="8" style="text-align: right;padding-right: 20px;">
              <BottomBtn saveTitle="发起" listType="quotationSheetBidding" :isWin="form.isWin" :accessId="accessId" :isAuthorised="isAuthorised" @onConfirm="handleBtTottom" />
            </el-col>
          </el-row>
        </div>
        <div class="table-card table-card-content">
          <el-row>
            <el-col :span="24">
              <el-form-item label="报价编号" prop="number">
                <el-input size="small" :disabled="disabled" v-model="form.number" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="产品名称" prop="productName" :rules="[{ message: '请输入', required: true, trigger: 'blur'}]">
                <el-input size="small" :disabled="disabled" v-model="form.productName" placeholder="请输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="招标方式" prop="type" :rules="[{ message: '请选择', required: true, trigger: 'change'}]">
                <el-select v-model="form.type" class="wd100" :disabled="disabled" placeholder="请选择">
                  <el-option v-for="it of quotationList" :key="it.id" :value="Number(it.value)" :label="it.label"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="申请人" prop="applicantName" :rules="[{ message: '请输入', required: true, trigger: 'blur'}]">
                <el-input size="small" :disabled="disabled" v-model="form.applicantName" placeholder="请输入" />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="报价截止时间" prop="cutoffTime">
                <el-date-picker size="small" clearable v-model="form.cutoffTime" class="wd100" :disabled="disabled" type="date" value-format="timestamp" placeholder="选择报价截止时间" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="供应商信息列表" required>
                <el-table stripe border :data="form.supplierList" ref="supplierList">
                  <el-table-column label="序号" align="center" type="index" />
                  <el-table-column label="供应商名称" align="center" prop="companyName" />
                  <el-table-column label="报价" align="center" prop="moldCost">
                    <template v-slot="scope">
                      {{(scope.row.moldCost) ? scope.row.moldCost + '元' : ''}}
                    </template>
                  </el-table-column>

                  <el-table-column label="报价时间" align="center" prop="createTime" width="250">
                    <template v-slot="scope">
                      <span>{{ parseTime(scope.row.createTime) }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="是否中标" align="center" v-if="form.isWin!=3">
                    <template v-slot="scope">
                      <el-checkbox v-model="scope.row.isWin" :true-label="1" :false-label="2"></el-checkbox>
                    </template>
                  </el-table-column>
                  <el-table-column label="报价内容" width="150" align="center" prop="remark">
                    <template v-slot="scope">
                      <el-button type="primary" @click="handleShowContent(scope.row.remark)" size="mini">查看内容</el-button>
                    </template>
                  </el-table-column>
                  <el-table-column label="报价附件" width="150" align="center" prop="files">
                    <template v-slot="scope">
                      <div class="file-box">
                        <div class="item-box" v-for="(item,index) in scope.row.files" :key="index">
                          <el-tag>{{item.name}}</el-tag>
                        </div>
                      </div>
                    </template>
                  </el-table-column>
                </el-table>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="备注信息">
                <el-input size="small" :disabled="disabled" v-model="form.remark" type="textarea" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- <el-row v-if="form.isWin==3">
            <el-col :span="24">
              <el-form-item label="流标信息">
                <el-input size="small" :disabled="disabled" v-model="form.productName" type="textarea" placeholder="请输入" />
              </el-form-item>
            </el-col>
          </el-row> -->
        </div>
      </el-card>
    </el-form>
    <el-image-viewer v-if="dialogVisible" :zIndex="9999" :on-close="closeImgViewer" :url-list="imgList" />
    <!-- 打印信息 -->
    <el-dialog :visible.sync="showPrintPage" width='1200px' custom-class="print-dialog" style="height: 98vh;overflow-y: auto;">
      <div style="text-align: right;margin-bottom:10px;">
        <el-button @click="PrintRow" type='primary' size='mini' plain>确认打印</el-button>
      </div>
      <div id="printMe" ref="print" class="print-main">
        <print-html :infoForm='form' :dialogTitle="'报销中标审批单'" :tasks="tasks" :quotationList="quotationList" />
      </div>
    </el-dialog>
    <!-- 审批流程信息 -->
    <FlowDialog ref="FlowDialog" :isOpen="showFlow" @onCancel="showFlow = false" @onSetId="handleSetApprovalId" @onTasks="handleTasks" :processInstanceId="form.processId" />
    <!-- 展示供应商信息 -->
    <ListDialog :isOpen="isOpen" @onCancel="isOpen = false" :selectIds="form.supplierIdList" @onConfirm="handleConfirm" />
    <!-- 报价内容 -->
    <el-dialog title="报价内容" :visible.sync="isShow" width="800px" @close="isShow=false">
      <editor v-model="remark" readOnly :min-height="192" />
    </el-dialog>
  </div>
</template>

<script>
import { debounce } from 'lodash'
import dayjs from "dayjs";
import { listData } from "@/api/system/dict/data";
import { updateApprovalBidding, getPageList, geNewtQuotationSheetBidding } from "@/api/bs/quotationSheetBidding";
import VerifyFunc from "@/utils/verity";

export default {
  name: 'supplierTb',
  components: {
    ListDialog: () => import('../../components/ListDialog'),
    FilePreview: () => import('@/components/FilePreview'),
    CommonName: () => import('@/components/CommonName'),
    FlowDialog: () => import('@/components/FlowDialog'),
    BottomBtn: () => import('@/components/BottomBtn'),
    UploadFile: () => import('@/components/UploadFile'),
    InputSelect: () => import('@/components/InputSelect'),
    printHtml: () => import('./printHtml'),
    Editor: () => import('@/components/Editor')
    // List: () => import('../../../components/TogetherList'),
    // printHtml: () => import('./printHtml'),
  },
  created() {
    if (this.$route.query.id) {
      this.handleInitForm(this.$route.query.id)
    }
    this.handleInitList()
  },
  watch: {
    fileList: {
      immediate: true,
      deep: true,
      handler(val) {
        if (val.length >= 1) {
          this.hideUpload = true
        } else {
          this.hideUpload = false
        }
      }
    }
  },
  computed: {
    disabled() {
      return !['add', 'edit'].includes(this.$route.query.flag)
    },
    title() {
      return this.$route.query.title
    },
  },
  data() {
    return {
      isShow: false,
      remark: null,
      qusRules: {
        materielName: [
          { required: true, message: "请输入", trigger: "blur" }
        ]
      }, // 物料规则
      qsTableList: [], // 物料信息列表
      isQsOpen: false,
      spTitle: '请选择',
      isOpen: false,
      isAuthorised: false,
      accessId: null,
      tasks: {},
      showFlow: false,
      showPrintPage: false,
      selectUserIds: [],
      VerifyFunc,
      defaultProps: {
        children: "children",
        label: "name",
        value: 'id',
        checkStrictly: false
      },
      areaTree: [],
      previewFile: false,
      fileUrl: null,
      mode: null,
      selectIds: [],
      lsIsOpen: false,
      tgIsOpen: false,
      addressList: [],
      tripTypeList: [],
      pdfName: null,
      isPdf: false,
      imgType: '.jpeg, .jpg, .png, .pdf',
      fileList: [],
      hideUpload: false,
      imgList: [], //当前图片src数组
      dialogVisible: false,
      prviewUrl: null,
      form: {
        materialIdList: [],
        quotationDetails: [],
        supplierList: [],
        supplierIdList: [],
      },
      quotationList: [],
      // 表单校验
      rules: {
        reason: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      userList: [],
      index: 0
    }
  },
  methods: {
    handleShowContent(content) {
      this.remark = content
      this.isShow = true
    },
    handleConfirm(list) {
      let arr = this.form.supplierList
      list.forEach(n => { arr.push(n) })
      this.$set(this.form, 'supplierList', arr)
      this.$set(this.form, 'supplierIdList', (arr || []).map(item => item.id))
      this.isOpen = false
    },
    handleSetApprovalId(id) {
      this.accessId = id
    },
    handleUpload(list) {
      this.fileList = list
    },
    handleBtTottom(val) {
      if (val === 0 || val === 1) {
        this.submitForm(val)
      } else if (val == 2) {
        this.showPrintPage = true
      } else {
        this.showFlow = true
      }
    },
    handleTasks(tasks) {
      this.tasks = tasks
    },
    PrintRow: debounce(function () { //确认打印档案
      this.$print(this.$refs.print)
    }, 200),
    handleInitList() {
      // 获取类别
      listData({
        pageNo: 1,
        pageSize: 100,
        dictType: 'quotation_type',
      }).then((res) => {
        this.quotationList = res.data.list || []
      })
    },
    handleInitForm(id) {
      this.processInstanceLoading = true
      geNewtQuotationSheetBidding(id).then(response => {
        this.form = response.data || {};
        this.fileList = this.form.files || []
        this.$nextTick(() => {
          this.form.processId && this.$refs.FlowDialog.getDetail(this.form.processId)
        })
        getPageList({
          pageNo: 1,
          pageSize: 1000,
          quotationId: id
        }).then((res) => {
          this.form.supplierList = res.data.list || [];
        })
        this.isAuthorised = this.form.isAuthorised
      });
    },
    submitForm(type) {
      this.$refs["form"].validate(valid => {
        if (!valid) {
          return;
        }
        // 添加/修改的提交
        let newForm = {
          approvalBiddingIdList: this.form.supplierList.filter(item => item.isWin == 1).map(n => n.id),
          id: this.form.id,
        }
        updateApprovalBidding(newForm).then(response => {
          this.$modal.msgSuccess(`发起成功!`);
          history.back()
        });
      });
    },
    cancel() {
      this.$emit('onCancel')
    },
  }
}
</script>
<style lang="scss" scoped>
@import '@/assets/styles/form/index.scss';
.my-process-designer {
  background: #fff !important;
}
</style>