<template>
  <div class="edit-add-detail">
    <div class="crumbs">
      <Breadcrumb
        :breadcrumbOpt="breadcrumbOpt"
        svg-name="#icon-icon_personalcenter"
        @breadcrumb-click="handleClose"
      />
    </div>
    <div class="form-content">
      <el-form
        ref="formInfo"
        :model="parameter"
        label-width="auto"
        label-position="right"
        :rules="rules"
      >
        <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-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="项目编号" prop="projectName">
              <el-input
                clearable
                readonly
                v-model="parameter.projectName"
                placeholder="请输入项目编号"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目名称" prop="projectName">
              <el-input
                clearable
                v-model="parameter.projectName"
                placeholder="请输入项目名称"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目负责人" prop="projectManager">
              <el-input
                clearable
                v-model="parameter.projectManager"
                placeholder="请输入项目负责人"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="项目负责人" prop="projectManager">
              <el-input
                clearable
                v-model="parameter.projectManager"
                placeholder="请输入项目负责人"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          
          <el-col :span="8"
            ><el-form-item label="业务类型" prop="applicationMethod">
              <dict-select
                dictCode="cglx-ywlx"
                :hasDefaultOption="true"
                clearable
                style="width:100%"
                v-model="parameter.applicationMethod"
                placeholder="请选择业务类型"
              /> </el-form-item
          ></el-col>
          
        </el-row>
        <el-row :gutter="24">
          <el-col :span="8">
            <el-form-item label="项目类型" prop="projectType">
              <el-select
                style="width:100%"
                v-model="parameter.projectType"
                clearable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in projectData"
                  :key="item.sequence"
                  :label="item.name"
                  :value="item.sequence"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="建设时间" prop="completionTime">
              <el-date-picker
                v-model="parameter.completionTime"
                type="date"
                placeholder="选择时间"
                value-format="yyyy-MM-dd"
                format="yyyy-MM-dd"
                style="width: 100%"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="总投资" prop="projectMoney">
              <el-input
                clearable
                v-model="parameter.projectMoney"
                placeholder="请输入总投资"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="24">
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input
                clearable
                type="textarea"
                v-model="parameter.remarks"
                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" style="display:flex;align-items:center">
            <div class="text-overflow">物料信息</div>
            <import-file
              :importData="importData"
              @load="load"
              
            ></import-file>
          </div>
        </div>
        <el-table
          ref="singleTable"
          :data="parameter.projectInfoList"
          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 label="物料名称" min-width="170" prop="matName">
            <template slot-scope="scope">
              <el-input
                clearable
                readonly
                v-model="scope.row.matName"
                placeholder="选择物料名称"
              >
                <el-button
                  slot="append"
                  icon="el-icon-search"
                  @click="openDialog"
                ></el-button
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="平台物料编号" min-width="150" prop="matCode">
            <template slot-scope="scope">
              <div>{{ scope.row.matCode }}</div>
            </template>
          </el-table-column>
          <el-table-column
            label="企业物料编号"
            min-width="150"
            prop="matCompanyCode"
          >
            <template slot-scope="scope">
              <div>{{ scope.row.matCompanyCode }}</div>
            </template>
          </el-table-column>

          <el-table-column label="物料牌号" min-width="170" prop="matMaterial">
            <template slot-scope="scope">
              <div>{{ scope.row.matMaterial }}</div>
            </template>
          </el-table-column>
          <el-table-column label="规格型号" min-width="170" prop="matSpec">
            <template slot-scope="scope">
              <div>{{ scope.row.matSpec }}</div>
            </template>
          </el-table-column>
          <el-table-column label="数量" min-width="150" prop="matNum">
            <template slot-scope="scope">
              <el-input
                clearable
                v-model="scope.row.matNum"
                placeholder="请输入数量"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="单位" min-width="150" prop="matUnit">
            <template slot-scope="scope">
              <div>{{ scope.row.matUnit }}</div>
            </template>
          </el-table-column>
          <el-table-column label="品牌 (厂家)" min-width="180" prop="matBrand">
            <template slot-scope="scope">
              <div>{{ scope.row.matBrand }}</div>
            </template>
          </el-table-column>
          <el-table-column label="需求日期" min-width="180" prop="demandDate">
            <template slot-scope="scope">
              <el-date-picker
                v-model="scope.row.demandDate"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="请选择需求日期"
                style="width:100%;"
              />
            </template>
          </el-table-column>
          <el-table-column label="基础扩展" min-width="180" prop="matBaseExt">
            <template slot-scope="scope">
              <div>{{ scope.row.matBaseExt }}</div>
            </template>
          </el-table-column>
          <el-table-column label="其他扩展" min-width="180" prop="matOtherExt">
            <template slot-scope="scope">
              <div>{{ scope.row.matOtherExt }}</div>
            </template>
          </el-table-column>
          <el-table-column label="送货地址" min-width="180" prop="unloadAddress">
            <template slot-scope="scope">
              <el-input
                clearable
                v-model="scope.row.unloadAddress"
                placeholder="请输入送货地址"
              ></el-input>
            </template>
          </el-table-column>
          <!-- 
          <el-table-column label="计划编号" min-width="180" prop="type">
            <template slot-scope="scope">
              <el-input
                clearable
                v-model="scope.row.type"
                placeholder="请输入计划编号"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="合同是否重复参照控制"
            min-width="220"
            prop="unloadAddress"
          >
            <template slot-scope="scope">
              <el-input
                clearable
                v-model="scope.row.unloadAddress"
                placeholder="合同是否重复参照控制"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="企业补充说明"
            min-width="180"
            prop="unloadAddress"
          >
            <template slot-scope="scope">
              <el-input
                :readonly="scope.row.readonly"
                v-model="scope.row.checkContent"
                :rows="2"
                maxlength="500"
                show-word-limit
                type="textarea"
                style="width:100%;"
              />
            </template>
          </el-table-column> -->
          <el-table-column
            fixed="right"
            align="right"
            width="90px"
            :index="999"
          >
            <template slot="header">
              <el-button
                size="mini"
                type="warning"
                circle
                icon="el-icon-plus"
                @click="addTable"
              />
            </template>
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                circle
                icon="el-icon-close"
                @click="delTable(scope.$index, scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <div slot="footer" class="footer">
      <el-button @click="handleClose">{{ $t('domestic.cancel') }}</el-button>
      <el-button type="primary" :loading="saveing" @click="handleSave">{{
        $t('domestic.save')
      }}</el-button>
    </div>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import dictUtils from '@/components/dict/DictSelectUtils.js'
import procurementManagement from '@/api/procurementManagement'
export default {
  name: 'domesticDialog',
  components: {Breadcrumb},
  props: {
    editData: Object
  },
  data() {
    return {
      importData: {
        title: '物料导入',
        templateName: '物料导入模板.xls',
        downloadUrl: '/../fvue/static/excel/material.xlsx',
        importUrl: window.context.portal + '/biz/Gs/v1/importExcelData',
        showProject: true,
        header: '物料导入'
      },
      saveing: false,
      breadcrumbOpt: [{breadcrumbName: '采购申请'}, {breadcrumbName: '新增'}],
      projectData: [],
      rules: {
        projectName: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur'
          }
        ],
        projectManager: [
          {
            required: true,
            message: '请输入项目负责人',
            trigger: 'blur'
          }
        ],
        completionTime: [
          {
            required: true,
            message: '请选择建设时间',
            trigger: 'blur'
          }
        ],
        projectType: [
          {
            required: true,
            message: '请选择项目类型',
            trigger: 'blur'
          }
        ]
      },
      parameter: {
        projectName: '',
        projectManager: '',
        projectType: '',
        completionTime: '',
        projectMoney: '',
        remarks: '',
        projectInfoList: []
      }
    }
  },
  created() {
    this.addModifyBtn()
    // 数据单位
    this.projectData = dictUtils.getDictItemsFromCache('xmlx')
  },
  mounted() {},
  methods: {
    //列表删除行
    addTable() {
      this.parameter.projectInfoList.push({
        matName: '',
        matCode: '',
        matCompanyCode: '',
        matMaterial: '',
        matSpec: '',
        matNum: '',
        matUnit: '',
        procurementMethod: '',
        matBrand: '',
        demandDate: '',
        matBaseExt: '',
        matOtherExt: '',
        id: '',
        key: new Date()
      })
    },
    //列表删除行
    delTable(index, row) {
      this.parameter.projectInfoList.splice(index, 1)
      // if (row.id) {
      //   this.parameter.deleteDetailsId.push(row.id)
      // }
    },
    //编辑
    addModifyBtn() {
      if (this.$route.query.editRows) {
        console.log()
        this.breadcrumbOpt[1].breadcrumbName = '编辑'
        this.modifychoData(this.$route.query.editRows)
      } else {
        this.breadcrumbOpt[1].breadcrumbName = '新增'
      }
    },
    //获取修改回显数据
    modifychoData(val) {
      procurementManagement
        .projectApprovalProDetailsSelectOne(val.id)
        .then(res => {
          this.parameter = res.value
        })
    },
    // 关闭//面包屑点击
    handleClose() {
      if (this.breadcrumbOpt[1].breadcrumbName === '编辑') {
        this.$router.push({
          name: 'projectPurchaseRequisition',
          params: {
            pageBean: this.$route.query.pageBean
          }
        })
      } else {
        this.$router.push({
          name: 'projectPurchaseRequisition'
        })
      }
      this.parameter = {}
    },
    // 保存
    handleSave() {
      this.$refs.formInfo.validate(valid => {
        if (valid) {
          this.saveing = true
          procurementManagement
            .projectApprovalProDetailsSaveOrUpdate(this.parameter)
            .then(res => {
              this.saveing = false
              if (res.state) {
                this.$message.success(res.message)
                if (this.breadcrumbOpt[1].breadcrumbName === '编辑') {
                  this.$router.push({
                    name: 'projectPurchaseRequisition',
                    params: {
                      pageBean: this.$route.query.pageBean
                    }
                  })
                } else {
                  this.$router.push({
                    name: 'projectPurchaseRequisition'
                  })
                }
              }
            })
        }
      })
    }
  }
}
</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;
    }
  }
}
</style>
