<template>
  <div>
    <div class="form-content">
      <el-form
        ref="formInfo"
        :model="parameter"
        label-width="auto"
        label-position="right"
        size="small"
        :rules="rules"
      >
        <div class="rows" @click="handleOver">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">基本信息</div>
          </div>
          <i
            :class="!flexAuto ? 'el-icon-arrow-right' : 'el-icon-arrow-down'"
            style="margin-left: 10px"
          ></i>
        </div>
        <div :class="!flexAuto ? 'auto' : 'classNone'">
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="合同编号" prop="contrCode">
                <el-input
                  clearable
                  v-model="parameter.contrCode"
                  placeholder="请输入合同编号"
                  :disabled="currentNode == 1 ? false : true"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同名称" prop="contrName">
                <el-input
                  clearable
                  v-model="parameter.contrName"
                  :disabled="currentNode == 1 ? false : true"
                  placeholder="请输入合同名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同类型" prop="contrMethod">
                <dict-select
                  dictCode="htgl-htlx"
                  :hasDefaultOption="true"
                  style="width: 100%"
                  :disabled="currentNode == 1 ? false : true"
                  v-model="parameter.contrMethod"
                  placeholder="请选择合同类型"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="合同签订人" prop="contrMethod">
                <el-input
                  v-model="parameter.sd"
                  :disabled="currentNode == 1 ? false : true"
                  clearable
                  placeholder="请输入合同签订人"
                ></el-input>
                <!-- <EipUserDialog
                  :title="'合同签订人'"
                  :single="true"
                  :matCategoryId="params.matCategoryId"
                  v-model="parameter.affiliatedCompanyName"
                  :config="{
                    id: 'parameter.affiliatedCompanyId',
                    name: 'parameter.affiliatedCompanyName',
                  }"
                  :searchPlaceholder="'选择合同签订人'"
                  @input="handleSelectorInput"
                ></EipUserDialog> -->
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同开始日期" prop="contractStartDate">
                <el-date-picker
                  v-model="parameter.contractStartDate"
                  contrMethod="date"
                  :disabled="currentNode == 1 ? false : true"
                  :picker-options="pickerOptionsStart"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                  placeholder="请选择合同开始日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同结束日期" prop="contractEndDate">
                <el-date-picker
                  v-model="parameter.contractEndDate"
                  contrMethod="date"
                  :disabled="currentNode == 1 ? false : true"
                  :picker-options="pickerOptionsEnd"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                  placeholder="请选择合同开始日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="购货企业" prop="matCompanyName">
                <el-input
                  :disabled="currentNode == 1 ? false : true"
                  clearable
                  v-model="parameter.matCompanyName"
                  placeholder="请输入购货企业"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item
                label="购货企业签章联系人"
                prop="matCompanyUserName"
              >
                <el-input
                  clearable
                  :disabled="currentNode == 1 ? false : true"
                  v-model="parameter.matCompanyUserName"
                  placeholder="请输入购货企业签章联系人"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="购货企业联系方式" prop="matCompanyUserPhone">
                <el-input
                  clearable
                  :disabled="currentNode == 1 ? false : true"
                  v-model="parameter.matCompanyUserPhone"
                  placeholder="请输入购货企业联系方式"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="销售企业" prop="vendorName">
                <el-input
                  clearable
                  @focus="openVendor"
                  :disabled="currentNode == 1 ? false : true"
                  v-model="parameter.vendorName"
                  prefix-icon="el-icon-search"
                  placeholder="请输入销售企业"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售企业签章联系人" prop="vendorUserName">
                <el-input
                  clearable
                  :disabled="currentNode == 1 ? false : true"
                  v-model="parameter.vendorUserName"
                  placeholder="请输入销售企业签章联系人"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="销售企业联系方式" prop="vendorUserPhone">
                <el-input
                  clearable
                  :disabled="currentNode == 1 ? false : true"
                  v-model="parameter.vendorUserPhone"
                  placeholder="请输入销售企业联系方式"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="付款方式" prop="payMethod">
                <dict-select
                  :disabled="currentNode == 1 ? false : true"
                  dictCode="cglx-fkfs"
                  :hasDefaultOption="true"
                  clearable
                  style="width: 100%"
                  v-model="parameter.payMethod"
                  placeholder="请选择付款方式"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否代采" prop="isAgencyProcure">
                <dict-select
                  dictCode="cgsq-sfdc"
                  :hasDefaultOption="true"
                  clearable
                  :disabled="currentNode == 1 ? false : true"
                  style="width: 100%"
                  v-model="parameter.isAgencyProcure"
                  placeholder="请选择是否代采"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否含税" prop="isTax">
                <dict-select
                  dictCode="cgsq-bjfs"
                  :hasDefaultOption="true"
                  clearable
                  :disabled="currentNode == 1 ? false : true"
                  style="width: 100%"
                  v-model="parameter.isTax"
                  placeholder="请选择是否含税"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="24">
            <el-col :span="8">
              <el-form-item label="合同签订日期" prop="signData">
                <el-date-picker
                  v-model="parameter.signData"
                  contrMethod="date"
                  :disabled="currentNode == 1 ? false : true"
                  :picker-options="pickerOptions"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                  placeholder="请选择合同签订日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同金额(元)" prop="contractAmount">
                <el-input
                  clearable
                  :disabled="currentNode == 1 ? false : true"
                  v-model="parameter.contractAmount"
                  placeholder="选择明细自动计算合同金额"
                ></el-input>
              </el-form-item> </el-col
          ></el-row>
          <div class="rows" v-if="currentNode!=1">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">查看合同</div>
            </div>
          </div>
          <div v-if="currentNode!=1">
              <el-button size="small" icon="el-icon-search" @click="handleQuery" type="primary">查看合同</el-button>
            </div>
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">相关文件</div>
            </div>
          </div>
          <div v-if="currentNode == 1">
            <el-upload
              class="upload-demo"
              ref="upload"
              :headers="headers"
              :action="action"
              :file-list="parameter.accessoryList"
              :multiple="false"
              :before-upload="beforeUpload"
              accept=".png,.jpg,.jpeg,.xlsx,.xls,.pdf,.docx,.doc,.zip,.rar"
              :show-file-list="false"
              :on-success="handleSuccess"
            >
              <el-button
                icon="el-icon-upload"
                slot="trigger"
                size="small"
                type="primary"
                >上传文件</el-button
              >
              <span></span>
            </el-upload>
          </div>
          <el-table
            class="down"
            :data="parameter.accessoryList"
            border
            stripe
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column prop="name" label="文件名称"></el-table-column>
            <el-table-column prop="size" label="文件大小">
              <template slot-scope="scope">
                <span>{{ scope.row.fileSize }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="上传时间">
              <template slot-scope="scope">
                <div>
                  {{ scope.row.createTime }}
                </div>
              </template>
            </el-table-column>
            <el-table-column width="150px" label="操作">
              <template slot-scope="scope">
                <el-button size="small" type="text">
                  <a
                    target="_blank"
                    @click="downloadFile(scope.row.name, scope.row.url)"
                    >下载</a
                  >
                </el-button>
                <el-button
                  size="small"
                  v-if="currentNode == 1"
                  type="text"
                  @click="deleteHandle(scope.$index)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>

        <div class="rows">
          <div class="rows-left">
            <div class="rows-hr"></div>
          </div>
          <div class="rows-title">
            <div class="text-overflow">物料信息</div>
          </div>
          <el-button
            type="primary"
            style="margin-left: 15px"
            icon="el-icon-thumb"
            size="mini"
            v-if="currentNode == 1"
            @click="open"
            >添加明细</el-button
          >
        </div>
        <el-table
          ref="singleTable"
          :data="parameter.detail"
          style="width: 100%"
          highlight-current-row
          :cell-style="{'text-align': 'center'}"
          :header-cell-style="{'text-align': 'center'}"
        >
          <el-table-column fixed type="index" width="55" label="序号" />
          <el-table-column
            prop="matCode"
            show-overflow-tooltip
            min-width="120px"
            align="center"
            label="企业物料编号"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="matPlatcode"
            show-overflow-tooltip
            min-width="120px"
            align="center"
            label="平台物料编号"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="matName"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            label="物料名称"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="matMaterial"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            label="物料牌号"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="matSpec"
            show-overflow-tooltip
            min-width="110px"
            align="center"
            label="规格型号"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="num"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            label="数量"
            resizable
          >
            <template slot-scope="scope">
              <el-input
                clearable
                type="Number"
                v-if="currentNode == 1"
                :min="0"
                @input="changeNum(scope.row)"
                v-model="scope.row.num"
                placeholder="数量"
              ></el-input>
              <div v-else>{{ scope.row.num }}</div>
            </template>
          </el-table-column>
          <el-table-column
            prop="planCode"
            show-overflow-tooltip
            min-width="120px"
            align="center"
            label="计划编号"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="pendingTime"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            label="挂账时间"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="acceptanceTime"
            show-overflow-tooltip
            min-width="100px"
            v-if="parameter.payMethod == 2"
            align="center"
            label="承兑时间"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="matUnit"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            label="计量单位"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="taxInprice"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            v-if="parameter.isTax == '1'"
            label="成交金额(元)"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="taxInvalue"
            show-overflow-tooltip
            v-if="parameter.isTax == '1'"
            min-width="100px"
            align="center"
            label="成交总额(元)"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="contrPrice"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            v-if="parameter.isTax == '2'"
            label="成交金额(元)"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="contrAmount"
            show-overflow-tooltip
            v-if="parameter.isTax == '2'"
            min-width="100px"
            align="center"
            label="成交总额(元)"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="taxValue"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            label="税额(元)"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="demandDate"
            show-overflow-tooltip
            min-width="120px"
            align="center"
            label="需求日期"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="matBrand"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            label="品牌"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="matBaseExt"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            label="基础扩展"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="matOtherExt"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            label="其他扩展"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="taxRate"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            label="税率(%)"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="unloadAddress"
            show-overflow-tooltip
            min-width="130px"
            align="center"
            label="送货地址"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="purNote"
            show-overflow-tooltip
            min-width="130px"
            align="center"
            label="企业补充说明"
            resizable
          >
          </el-table-column>
        </el-table>
      </el-form>
    </div>
  </div>
</template>
    
    <script>
import {helper} from '../../../public/hotent.helper.js'
import req from '@/request.js'
import basicData from '@/api/basicData'
import {quillEditor} from 'vue-quill-editor' //调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import {mapState} from 'vuex'
import utils from '@/hotent-ui-util.js'
export default {
  components: {quillEditor},
  data() {
    return {
      pickerOptions: {
        disabledDate: (time) => {
          if (this.parameter.contractEndDate) {
            // eslint-disable-next-line max-len
            return (
              time.getTime() <=
              new Date(this.basicInfo.createDate).getTime() - 86400000
            )
          }
          return (
            time.getTime() <=
            new Date(this.basicInfo.createDate).getTime() - 86400000
          )
        },
      },
      pickerOptionsStart: {
        disabledDate: (time) => {
          if (this.parameter.contractEndDate) {
            // eslint-disable-next-line max-len
            return (
              time.getTime() >
                new Date(this.parameter.contractEndDate).getTime() ||
              time.getTime() <=
                new Date(this.basicInfo.createDate).getTime() - 86400000
            )
          }
          return (
            time.getTime() <=
            new Date(this.basicInfo.createDate).getTime() - 86400000
          )
        },
      },
      // 结束时间限制
      pickerOptionsEnd: {
        disabledDate: (time) => {
          if (this.parameter.contractStartDate) {
            return (
              time.getTime() <
              new Date(this.parameter.contractStartDate).getTime()
            )
          }
          return (
            time.getTime() <=
            new Date(this.basicInfo.createDate).getTime() - 86400000
          )
        },
      },
      basicInfo: {
        // 创建时间 此时间可以通过后端接口取服务器时间 或者 用 new Date().getTime()
        createDate: new Date().getTime(),
      },
      parameter: {},
      loading: false,
      flexAuto: true,
      dataList: [],
      saveFlag: true,
      currentNode: 1,
      activeName: 1,
      detail: [],
      vendorList: [],
      detailsList: [],
    }
  },
  computed: {
    ...mapState({
      headers: (state) => {
        return {Authorization: `Bearer ${state.login.currentUser.token}`}
      },
      action: function () {
        return window.context.portal + '/biz/universal/v1/minioUpload'
      },
    }),
  },
  mounted() {
    this.currentNode = this.$route.query.node
    window.saveData = this.saveData
    window.relationData = this.relationData
    this.id = utils.getUrlKey('id')
    this.node = utils.getUrlKey('node')
    if (this.id) {
      req
        .post(window.context.portal + '/bizContract/v1/getById?id=' + this.id)
        .then((res) => {
          if (res.data.value) {
            this.parameter = res.data.value
            this.parameter.detail = this.parameter.itemList
          }
        })
    }
  },
  methods: {
    handleQuery(){
      this.$http.post('${portal}/bizContract/v1/browseContract?threeContrId='+this.parameter.threeContractId).then(res=>{
        if(res.data.state){
          this.$message.success('操作成功')
        }
        window.open(res.data.message,'_blank')
      })
    },
    changeNum(val) {
      console.log(val)
      this.parameter.detail.forEach((item) => {
        if (item.id == val.id) {
          if (this.parameter.isTax == '1') {
            item.taxInvalue = ((item.taxInprice) * (Number(item.num))).toFixed(
              2
            )
            item.taxValue = (
              (item.taxInvalue * (item.taxRate / 100)) /
              (1 + item.taxRate / 100)
            ).toFixed(2)
          }
          if (this.parameter.isTax == '2') {
            item.taxInvalue = ((item.taxInprice) * (Number(item.num))).toFixed(
              2
            )
            item.taxValue = (
              (item.taxInvalue * (item.taxRate / 100)) /
              (1 + item.taxRate / 100)
            ).toFixed(2)
          }
        }
      })
    },
    //下载按钮回调
    downloadFile(name, url) {
      console.log(name, 'name')
      var a = document.createElement('a')
      var event = new MouseEvent('click')
      a.download = name
      a.target = '_blank'
      a.href = url
      a.dispatchEvent(event)
    },
    // 删除
    deleteHandle(index) {
      this.$confirm('是否确认删除该附件', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.parameter.accessoryList.splice(index, 1)
      })
    },
    // 附件上传
    handleSuccess(res, file, fileList) {
      this.parameter.accessoryList.push(res.value)
    },
    beforeUpload(file) {
      let acceptList = ['xlsx', 'xls','png','jpg','jpeg','xlsx','xls','pdf','docx','doc','zip','rar']
      // 根据文件名获取文件的后缀名
      let fileType = file.name.split('.').pop().toLowerCase()
      // 判断文件格式是否符合要求
      if (acceptList.indexOf(fileType) === -1) {
        this.$message.error('请上传 .png,.jpg,.jpeg,.xlsx,.xls,pdf,.docx,.doc,.zip,.rar 格式的文件 !')
        return false
      }
    },
    handleOver() {
      this.flexAuto = !this.flexAuto
    },
    /* 保存 */
    saveData() {
      if (this.saveFlag) {
        //如果是第一个节点他可以保存数据，否则不需要进行数据操作
        if (this.node == 1) {
          this.parameter.status = 7
          this.$http
            .post('${portal}/bizContract/v1/saveOrUpdateContr', this.parameter)
            .then((res) => {
              console.log(res, '调用结果')
              if (res.data.state) {
                this.id = res.data.value
                let params = {
                  type: 'saveData',
                  state: true,
                  businessKey: this.id, // todo 确认id字段是否正确 用接口返回值做businessKey
                  sysCode: '',
                }
                params.vars = {
                  // props1: this.forms.props1,
                  //   noticeReleaseUserAccount: this.form.noticeReleaseUserAccount,
                }
                hotent.sendMessage(params)
                this.saveFlag = false
              }
            })
        } else {
          let params = {
            type: 'saveData',
            state: true,
            businessKey: this.id, // 流程地址参数id
            sysCode: '',
          }
          hotent.sendMessage(params)
          this.isFirst = false
        }
      } else {
        let params = {
          type: 'saveData',
          state: true,
          businessKey: this.id, // 流程地址参数id
          sysCode: '',
        }
        params.vars = {
          //   noticeReleaseUserAccount: this.form.noticeReleaseUserAccount,
        }
        hotent.sendMessage(params)
        this.isFirst = false
      }
      // }
    },
    relationData(data) {
      this.loading = true
      this.$http
        .post('${portal}/bizContract/v1/getById?id=' + data.id)
        .then((res) => {
          this.loading = false
          this.parameter = res.data.value
          this.parameter.detail = this.parameter.itemList
        })
    },
  },
}
</script>
    
    <style lang="scss" scoped>
.form-content {
  overflow-x: hidden;
}
.rows:first-of-type {
  cursor: pointer;
}
.auto {
  display: none;
}
.classNone {
  display: block;
}
/deep/.el-table-lable-box .cell {
  display: flex;
  justify-content: center;
}
.form-flex {
  /deep/.el-form-item__content {
    display: flex;
    align-items: center;
  }
}
.append {
  width: 10%;
  background-color: #f5f7fa;
  color: #909399;
  vertical-align: middle;
  display: table-cell;
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 0 10px;
  white-space: nowrap;
  text-align: center;
}
</style>