<template>
  <div class="edit-add-detail">
    <div class="crumbs">
      <Breadcrumb
        :breadcrumbOpt="breadcrumbOpt"
        svg-contrName="#icon-bill"
        @breadcrumb-click="handleClose"
      />
    </div>
    <div class="form-content" v-loading="loading">
      <el-form
        ref="formInfo"
        :model="parameter"
        label-width="auto"
        label-position="right"
        size="small"
      >
        <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="请输入合同编号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="合同名称" prop="contrName">
                <el-input
                  clearable
                  v-model="parameter.contrName"
                  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%"
                  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="matCompanyClientName">
                <el-input
                  v-model="parameter.matCompanyClientName"
                  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"
                  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"
                  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
                  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
                  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
                  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
                  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
                  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
                  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
                  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
                  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
                  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"
                  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
                  v-model="parameter.contractAmount"
                  placeholder="选择明细自动计算合同金额"
                ></el-input>
              </el-form-item> </el-col
          ></el-row>
          <div class="rows">
            <div class="rows-left">
              <div class="rows-hr"></div>
            </div>
            <div class="rows-title">
              <div class="text-overflow">相关文件</div>
            </div>
          </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>
              </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>
        </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="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="num"
            show-overflow-tooltip
            min-width="100px"
            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"
            label="含税金额(元)"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="taxInvalue"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            label="含税总额(元)"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="contrPrice"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            label="不含税金额(元)"
            resizable
          >
          </el-table-column>
          <el-table-column
            prop="contrAmount"
            show-overflow-tooltip
            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-column
            prop="vendorNote"
            show-overflow-tooltip
            min-width="130px"
            align="center"
            label="成交人补充说明"
            resizable
          >
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <div slot="footer" class="footer">
      <el-button @click="handleClose">{{ $t('domestic.cancel') }}</el-button>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import vendorDialog from './vendorDialog'
import utils from '@/utils.js'
import contracDetailedDialog from './contracDetailedDialog'
import moment from 'moment'
export default {
  contrName: 'contractPreparationAddDialog',
  components: {Breadcrumb},
  props: {
    editData: Object,
  },
  data() {
    return {
      centralizedData: [
        {contrName: '是', id: 1},
        {contrName: '否', id: 0},
      ],
      breadcrumbOpt: [{breadcrumbName: '合同编制'}, {breadcrumbName: '详情'}],
      loading: false,
      flexAuto:true,
      parameter: {
        detail: [],
        vendorName: '',
        contractAmount: '',
        contractStartDate: '',
        contractAmount: '',
        contractEndDate: '',
        isTax: '1',
        isAgencyProcure: 0,
        payMethod: '',
        contrCode: '',
        matCompanyName: '',
        matCompanyCode: '',
        matCompanyId: '',
        signData: '',
        status: '1',
      },
      vendorList: [],
      detailsList: [],
    }
  },
  created() {
    this.addModifyBtn()
  },
  mounted() {},
  methods: {
    handleOver() {
      this.flexAuto = !this.flexAuto
    },
    // 获取字典值翻译
    getDictName(code, value) {
      return utils.getDictName(code, value)
    },
    //编辑
    addModifyBtn() {
      this.modifychoData(this.$route.query.detailRows)
    },
    //获取修改回显数据
    modifychoData(val) {
      this.$http.post('${portal}/bizContract/v1/getById?id='+val.id).then(res=>{
        console.log(res);
        if(res.data.state){
          this.parameter = res.data.value
          this.parameter.detail = this.parameter.itemList
          // this.detailsList = this.parameter.itemList
          this.vendorList = []
          this.vendorList.push({
            vendorCode:this.parameter.vendorCode,
            vendorId:this.parameter.vendorId,
            vendorName:this.parameter.vendorName
          })
        }
      })
    },
    // 关闭//面包屑点击
    handleClose() {
      this.$router.push({
        name: 'contractPreparation',
      })

      this.parameter = {}
    },
  },
}
</script>

<style lang="scss" scoped>
// /deep/.el-row {
//   padding: 0 100px;
// }
.rows {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #ebebeb;
  margin-bottom: 16px;
  padding: 10px 0;
  .rows-left {
    margin-right: 10px;
    .rows-hr {
      width: 3px;
      height: 18px;
      background-color: #0e6eff;
      border-radius: 2px;
    }
  }
  .rows-title {
    .text-overflow {
      width: 100%;
      font-size: 16px;
    }
  }
}
.auto {
  display: none;
}
.classNone {
  display: block;
}
.rows:first-of-type {
  cursor: pointer;
}
</style>
