<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" v-loading="loading">
      <el-form
        ref="formInfo"
        :model="parameter"
        label-width="auto"
        label-position="left"
        :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="6">
              <el-form-item label="商品编号" prop="code">
                <el-input clearable v-model="parameter.code" placeholder="请输入商品编号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商品名称" prop="name">
                <el-input
                  clearable
                  placeholder="请输入商品名称"
                  v-model="parameter.name"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="组织名称" prop="orgName">
                <el-input readonly v-model="parameter.orgName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="规格型号" prop="spec">
                <el-input
                  clearable
                  placeholder="请输入规格型号"
                  v-model="parameter.spec"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="品牌" prop="brand">
                <el-input
                  clearable
                  placeholder="请输入品牌"
                  v-model="parameter.brand"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计量单位" prop="unit">
                <el-input
                  clearable
                  placeholder="请输入计量单位"
                  v-model="parameter.unit"
                ></el-input>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="6">
              <el-form-item label="产品生效日期" prop="startDate">
                <el-date-picker
                  style="width: 100%"
                  v-model="parameter.startDate"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择产品生效日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="产品失效日期" prop="endDate">
                <el-date-picker
                  style="width: 100%"
                  v-model="parameter.endDate"
                  value-format="yyyy-MM-dd"
                  type="date"
                  placeholder="选择产品失效日期"
                >
                </el-date-picker>
              </el-form-item>
            </el-col> -->
          </el-row>
          <el-row :gutter="24">
              <el-col :span="24">
                <el-form-item label="备注" prop="desc">
                <el-input v-model="parameter.desc" clearable type="textarea" 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>
          <div>
            <el-upload
              class="upload-demo"
              ref="upload"
              :headers="headers"
              :action="action"
              :file-list="dataList"
              :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="dataList"
            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"
                  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" style="display: flex; align-items: center">
            <div class="text-overflow">物料信息</div>
            <el-button
              @click="openDialog"
              type="primary"
              style="margin-left: 10px"
              size="small"
              icon="el-icon-plus"
              >添加</el-button
            >
          </div>
        </div>
        <div class="common-table-content btn-pagenation" ref="tableContent">
          <el-table
            ref="singleTable"
            class="table"
            :data="parameter.detailList"
            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="120"
              show-overflow-tooltip
              prop="matCode"
            >
            </el-table-column>
            <el-table-column
              label="平台物料编号"
              min-width="120"
              show-overflow-tooltip
              prop="matPlatcode"
            >
            </el-table-column>
            
            <el-table-column
              label="物料分类编号"
              show-overflow-tooltip
              min-width="110"
              prop="matCategory"
            >
            </el-table-column>
            <el-table-column
              label="物料名称"
              show-overflow-tooltip
              min-width="110"
              prop="matName"
            >
            </el-table-column>
            <el-table-column
              label="物料牌号"
              min-width="110"
              show-overflow-tooltip
              prop="matMaterial"
            ></el-table-column>
            <el-table-column
              label="规格型号"
              show-overflow-tooltip
              min-width="130"
              prop="matSpec"
            >
            </el-table-column>
            <el-table-column
              label="规格型号"
              show-overflow-tooltip
              min-width="130"
              prop="matSpec"
            >
            </el-table-column>
            <el-table-column
              label="计量单位"
              show-overflow-tooltip
              min-width="80"
              prop="matUnit"
            >
            </el-table-column>

            <el-table-column
              label="数量"
              min-width="110"
              prop="num"
              show-overflow-tooltip
            >
              <template slot="header">
                <span class="required">*</span>数量
              </template>
              <template slot-scope="scope">
                <el-form-item
                  :prop="`detailList.${scope.$index}.num`"
                  :rules="rules.num"
                  label-width="0px"
                  style="margin-bottom: 0px"
                >
                  <el-input
                    clearable
                    type="Number"
                    :min="0"
                    v-model="scope.row.num"
                    placeholder="数量"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column
              label="品牌/产地"
              show-overflow-tooltip
              min-width="100"
              prop="matBrand"
            >
            </el-table-column>
            <el-table-column
              label="基础扩展"
              show-overflow-tooltip
              min-width="140"
              prop="matBaseExt"
            >
            </el-table-column>
            <el-table-column
              label="其他扩展"
              show-overflow-tooltip
              min-width="140"
              prop="matOtherExt"
            >
            </el-table-column>
            <el-table-column label="税率" min-width="80" prop="matTaxrate">
                
            </el-table-column>
            <el-table-column label="是否集采" min-width="80" prop="matIfPlat">
                    <template slot-scope="scope">
                        <div v-if="scope.row.matIfPlat == 0">
                            自采
                        </div>
                        <div v-if="scope.row.matIfPlat == 1">
                            集采
                        </div>
                    </template>
                </el-table-column>
            <el-table-column
              fixed="right"
              align="right"
              label="操作"
              width="90px"
              :index="999"
            >
              <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>
        </div>
      </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>
    <!-- 物料明细 -->
    <purchaseMaterial
      @addDetail="addDetail"
      :useOrgList="methodUnitsList"
      ref="troubleshooting"
    />
  </div>
</template>
  
  <script>
  import purchaseMaterial from './purchaseMaterial.vue'
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import {mapState} from 'vuex'
export default {
  name: 'quoteTemplateAddDialog',
  components: {Breadcrumb,purchaseMaterial},
  props: {
    editData: Object,
  },
  data() {
    return {
      breadcrumbOpt: [{breadcrumbName: '产品信息'}, {breadcrumbName: '新增'}],
      saveing: false,
      methodUnitsList: [],
      flexAuto: true,
      rules: {
        orgName: [
          {
            required: true,
            message: '请输入编制公司',
            trigger: 'blur',
          },
        ],
        brand: [
          {
            required: true,
            message: '请输入品牌',
            trigger: 'blur',
          },
        ],
        name: [
          {
            required: true,
            message: '请输入商品名称',
            trigger: 'blur',
          },
        ],
        code: [
          {
            required: true,
            message: '请输入商品编号',
            trigger: 'blur',
          },
        ],
        spec: [
          {
            required: true,
            message: '请输入规格型号',
            trigger: 'blur',
          },
        ],
        startDate: [
          {
            required: true,
            message: '请选择产品生效日期',
            trigger: 'blur',
          },
        ],
        endDate: [
          {
            required: true,
            message: '请选择产品失效日期',
            trigger: 'blur',
          },
        ],
      },
      parameter: {
        orgName: '',
        remarks: '',
        detailList: [],
        name: '',
        code: '',
        orgId: '',
        accessoryList:[],
        orgCode: '',
        endDate:'',
        startDate:'',
        spec:'',
        brand:'',
        desc:'',
        unit:''
      },
      dataList: [],
      methodUnitsList:[]
    }
  },
  created() {
    this.addModifyBtn()
    this.currentUser = JSON.parse(sessionStorage.getItem('currentUserDetail'))
    this.parameter.orgName = this.currentUser.org[0].orgName
    this.parameter.orgId = this.currentUser.org[0].orgId
    this.parameter.orgCode = this.currentUser.org[0].orgCode
  },
  computed: {
    ...mapState({
      headers: (state) => {
        return {Authorization: `Bearer ${state.login.currentUser.token}`}
      },
      action: function () {
        return window.context.portal + '/biz/universal/v1/minioUpload'
      },
    }),
  },
  mounted() {},
  methods: {
    getCode() {
      this.$http
        .get('${portal}/sys/identity/v1/getNextIdByAlias?alias=cpgl_cpbh')
        .then((res) => {
          if (res.data.state) {
            this.parameter.code = res.data.value
          }
        })
    },
    handleOver() {
      this.flexAuto = !this.flexAuto
    },
    addDetail(list) {
      console.log(list, 'llll')
      this.parameter.detailList = list
        this.parameter.detailList.forEach(item=>{
            item.matId = item.id
        })
    //   if (this.parameter.detailList.length == 0) {
    //     this.parameter.detailList = list
    //     this.parameter.detailList.forEach(item=>{
    //         item.matId = item.id
    //     })
    //   } else {
    //     list.forEach((item, index) => {
    //       this.parameter.detailList.push({
    //         matCategory:item.matCategory,
    //         matName: item.matName,
    //         matCode: item.matCode,
    //         matMaterial: item.matMaterial,
    //         matSpec: item.matSpec,
    //         num: item.num,
    //         matUnit: item.matUnit,
    //         matBrand: item.matBrand,
    //         matBaseExt: item.matBaseExt,
    //         matOtherExt: item.matOtherExt,
    //         matPlatcode: item.matPlatcode,
    //         matTaxrate: item.matTaxrate,
    //         matId: item.id,
    //         matIfPlat: item.matIfPlat,
    //         key: new Date(),
    //       })
    //     })
    //   }
      this.methodUnitsList = this.parameter.detailList
    },
    // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
    handleSuccess(res, file, fileList) {
      console.log(res, fileList)
      this.dataList.push(res.value)
      this.parameter.accessoryList = this.dataList
    },
    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
      }
    },
    //下载按钮回调
    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.dataList.splice(index, 1)
      })
    },
    //编辑
    addModifyBtn() {
      if (this.$route.query.editRows) {
        this.breadcrumbOpt[1].breadcrumbName = '编辑'
        this.modifychoData(this.$route.query.editRows)
      } else {
        this.breadcrumbOpt[1].breadcrumbName = '新增'
        this.getCode()
      }
    },
    //获取修改回显数据
    modifychoData(val) {
      this.$http
        .post('${portal}/product/v1/getDataById?id=' + val.id)
        .then((res) => {
          this.parameter = res.data.value
          this.dataList = this.parameter.accessoryList
        })
    },
    // 打开物料弹窗
    openDialog() {
      this.$refs.troubleshooting.add(this.parameter)
    },
    // 关闭//面包屑点击
    handleClose() {
      if (this.breadcrumbOpt[1].breadcrumbName === '编辑') {
        this.$router.push({
          name: 'productLibrary',
        })
      } else {
        this.$router.push({
          name: 'productLibrary',
        })
      }
      this.parameter = {}
    },
    // 保存
    handleSave() {
      console.log(this.parameter, 'this.parameter')
      this.parameter.detailList.forEach((item) => {
        if (item.id) {
          delete item.id
        }
      })
      this.$refs.formInfo.validate((valid) => {
        if (valid) {
          this.saveing = true
          this.$http
            .post('${portal}/product/v1/saveOrUpdateEntity', this.parameter)
            .then((res) => {
              if (res.data.state) {
                this.$message.success(res.data.message)
                this.handleClose()
              }
              this.saveing = false
            })
        }
      })
    },
  },
}
</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>
  