<template>
  <div class="edit-add-detail">
    <div class="crumbs">
      <Breadcrumb
        :breadcrumbOpt="breadcrumbOpt"
        svg-name="#icon-audit"
        @breadcrumb-click="handleClose"
      />
    </div>
    <div class="form-content">
      <el-form :model="form" label-width="140px" ref="form" :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="noticeCode">
                <el-input
                  v-model="form.noticeCode"
                  clearable
                  placeholder="请输入项目编号"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="项目名称" prop="noticeName">
                <el-input
                  v-model="form.noticeName"
                  placeholder="请输入项目名称"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采购申请编号" prop="applicationId">
                <el-input
                  v-model="form.applicationId"
                  placeholder="请选择采购申请"
                  @focus="purchasingUnitsBtn"
                  prefix-icon="el-icon-search"
                >
                </el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采购单位" prop="procureOrgName">
                <el-input
                  v-model="form.procureOrgName"
                  placeholder="请输入采购单位"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="采购单位联系人" prop="procureContact">
                <el-input
                  v-model="form.procureContact"
                  placeholder="请输入联系人"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采购单位联系方式" prop="procurePhone">
                <el-input
                  v-model="form.procurePhone"
                  placeholder="请输入联系方式"
                  type="Number"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="采购单位联系地址" prop="procureAddress">
                <el-input
                  v-model="form.procureAddress"
                  placeholder="请输入联系地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="拟定供应商名称" prop="vendorName">
                <el-input
                  @focus="openVendor"
                  prefix-icon="el-icon-search"
                  clearable
                  v-model="form.vendorName"
                  placeholder="请输入拟定供应商名称"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="供应商联系地址">
                <el-input
                  v-model="form.vendorAddress"
                  placeholder="请输入联系地址"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="公示有效期至" prop="validityDate">
                <el-date-picker
                  type="date"
                  v-model="form.validityDate"
                  placeholder="请选择公示有效期至"
                  value-format="yyyy-MM-dd"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item
                label="拟定采购预算总金额(元)"
                prop="draftTotalAmount"
              >
                <el-input
                  v-model="form.draftTotalAmount"
                  placeholder="请输入拟定采购预算总金额"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="公示内容" prop="establishmentName">
                <TinymceEditor
                  v-model="form.establishmentName"
                  ref="tinymceEditorRef"
                ></TinymceEditor>
              </el-form-item>
            </el-col>
          </el-row>
        </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>
            <import-file :importData="importData" @load="load"></import-file>
          </div>
        </div>
        <el-table
          ref="singleTable"
          :data="form.detailsList"
          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="150"
            prop="matCode"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="平台物料编号"
            min-width="150"
            prop="matPlatcode"
            show-overflow-tooltip
          >
          </el-table-column>
          <el-table-column
            label="物料名称"
            min-width="150"
            prop="matName"
            show-overflow-tooltip
          >
          </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="matNum"
            show-overflow-tooltip
            min-width="100px"
            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="matUnit"
            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="matIfPlat"
            show-overflow-tooltip
            min-width="100px"
            align="center"
            label="是否集采"
            resizable
          >
            <template v-slot="{row}">
              {{ getDictName('cglx-ywlx', row.matIfPlat) }}
            </template>
          </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="remarks"
            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>
      <el-button type="primary" :loading="saveing" @click="handleSave">{{
        $t('domestic.save')
      }}</el-button>
    </div>
    <!-- 选择采购组织 -->
    <purchasingUnits
      @addDetail="addDetail"
      :useOrgList="methodUnitsList"
      ref="troubleshooting"
    />
    <!-- 拟定供应商 -->
    <supplierDialog
      ref="vendor"
      @vendor="getVendor"
      :useOrgList="vendorList"
    ></supplierDialog>
  </div>
</template>

<script>
import pagination from '@/components/pagination'
import {TableMixin} from '@/mixins/tableMixin'
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import {mapState} from 'vuex'
import req from '@/request.js'
import utils from '@/utils.js'
import TinymceEditor from '@/components/TinymceEditor/TinymceEditor.vue'
import purchasingUnits from './purchasingUnits.vue'
import supplierDialog from '@/components/dialog/supplierDialog.vue'
export default {
  name: 'DemandEntry',
  components: {
    pagination,
    Breadcrumb,
    TinymceEditor,
    purchasingUnits,
    supplierDialog,
  },
  mixins: [TableMixin],
  data() {
    return {
      breadcrumbOpt: [
        {breadcrumbName: '单一来源公示'},
        {breadcrumbName: '新增'},
      ],
      tableMaxHeight: 400,
      importData: {
        title: '物料导入',
        templateName: '物料导入模板.xls',
        downloadUrl: '/../fvue/static/excel/明细导入.xlsx',
        importUrl:
          window.context.portal +
          '/bizWinBiddingNoticeDetaile/v1/excelToData',
        header: '物料导入',
      },
      loading: false,
      tableLoading: false,
      saveing: false,
      vendorList: [],
      form: {
        procureType: 5,
        noticeType: 1,
        procureOrgId: '',
        procureOrgCode: '',
        procureOrgName: '',
        vendorId: '',
        vendorCode: '',
        vendorName: '',
        noticeCode: '',
        accessoryList: [],
        procureContact: '',
        procurePhone: '',
        procureAddress: '',
        vendorAddress: '',
        establishmentName: '',
        validityDate: '',
        applicationId: '',
        noticeName: '',
        detailsList: [],
        status: '3',
      },
      tableData: [],
      flexAuto: true,
      methodUnitsList: [],
      rules: {
        noticeCode: [
          {
            required: true,
            message: '请输入项目编号',
            trigger: 'blur',
          },
        ],
        noticeName: [
          {
            required: true,
            message: '请输入项目名称',
            trigger: 'blur',
          },
        ],
        procureOrgName: [
          {
            required: true,
            message: '请输入采购单位',
            trigger: 'blur',
          },
        ],
        procureContact: [
          {
            required: true,
            message: '请输入采购单位联系人',
            trigger: 'blur',
          },
        ],
        procurePhone: [
          {
            required: true,
            message: '请输入采购单位联系方式',
            trigger: 'blur',
          },
        ],
        procureAddress: [
          {
            required: true,
            message: '请输入采购单位联系地址',
            trigger: 'blur',
          },
        ],
        vendorName: [
          {
            required: true,
            message: '请输入拟定供应商名称',
            trigger: 'blur',
          },
        ],
        validityDate: [
          {
            required: true,
            message: '请选择公示有效期至',
            trigger: 'blur',
          },
        ],
        draftTotalAmount: [
          {
            required: true,
            message: '请输入拟定总金额',
            trigger: 'blur',
          },
        ],
        establishmentName: [
          {
            required: true,
            message: '请输入内容',
            trigger: 'blur',
          },
        ],
      },
      currentUser: {},
    }
  },
  mounted() {},
  created() {
    this.currentUser = JSON.parse(sessionStorage.getItem('currentUserDetail'))
    this.form.procureContact = this.currentUser.user.fullname
    this.form.procurePhone = this.currentUser.user.mobile
    this.getById()
  },
  methods: {
    getCode() {
      this.$http
        .get('${portal}/sys/identity/v1/getNextIdByAlias?alias=cgpt_cglx')
        .then((res) => {
          if (res.data.state) {
            this.form.noticeCode = res.data.value
          }
        })
    },
    //采购申请
    purchasingUnitsBtn() {
      this.$refs.troubleshooting.add()
    },
    addDetail(list) {
      console.log(list)
      this.methodUnitsList = list
      this.form.applicationId = list[0].id
      let ids = list.map((item) => {
        return item.id
      })
      this.form.procureOrgCode = list[0].preparedOrgCode
      this.form.procureOrgId = list[0].preparedOrgId
      this.form.procureOrgName = list[0].preparedOrgName
      this.form.matIfPlat = list[0].matIfPlat
      this.form.acceptanceTime = list[0].acceptanceTime
      if (
        list[0].accessoryList.length != 0 &&
        list[0].accessoryList != undefined
      ) {
        this.form.accessoryList = list[0].accessoryList
        this.form.accessoryList.forEach((item) => {
          delete item.id
        })
      }
      let params = {
        querys: [
          {
            group: 'main',
            operation: 'IN',
            parentGroup: '',
            property: 'purchasingApplicationId',
            relation: 'AND',
            value: ids,
          },
        ],
        pageBean: {
          pageSize: -1,
          page: -1,
        },
      }
      this.$http
        .post('${portal}/bizPurchasingApplicationDetails/v1/page', params)
        .then((res) => {
          if (res.data.state) {
            this.form.detailsList = res.data.value.rows
            this.form.detailsList.forEach((item) => {
              item['matCompanyName'] = this.form.procureOrgName
              item.applicationDetailId = item.id
              item.applicationId = list[0].id
            })
          }
        })
      this.useOrgListValue = list
        .map((item) => {
          return item.preparedOrgName
        })
        .join(',')
    },
    getById() {
      let id = this.$route.query.id
      if (id) {
        this.breadcrumbOpt[1].breadcrumbName = '编辑'
        this.getId(id)
      } else {
        this.breadcrumbOpt[1].breadcrumbName = '新增'
        this.getCode()
      }
    },
    getId(id) {
      this.$http
        .post('${portal}/bizWinBiddingNotice/v1/selectOne?id=' + id)
        .then((res) => {
          if (res.data.state) {
            this.form = res.data.value
            this.form.detailsList = this.form.winBiddingNoticeDetailList
          }
        })
    },
    getDictName(code, value) {
      return utils.getDictName(code, value)
    },
    handleOver() {
      this.flexAuto = !this.flexAuto
    },
    // 上传文件成功回调
    handleSuccess(res, accessoryList) {
      if (res.state) {
        this.form.accessoryList.push(res.value)
      }
    },
    //下载按钮回调
    downloadFile(name, url) {
      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.accessoryList.splice(index, 1)
      })
    },
    // 关闭//面包屑点击
    handleClose() {
      this.$router.push({
        name: 'announcementWinningBid',
        params: {
          tabsActiveName: 'singleSource',
        },
      })
    },
    // 顶部搜索
    load(data) {
      console.log(data,222222);
    },
    handleSelectionChange(currentData) {
      this.currentDataDel = currentData
    },
    handleSave() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.saveing = true
          this.form.winBiddingNoticeDetailList = this.form.detailsList
          this.$http
            .post(
              '${portal}/bizWinBiddingNotice/v1/saveOrUpdateEntity',
              this.form
            )
            .then((res) => {
              if (res.data.state) {
                this.$message.success(res.data.message)
                this.handleClose()
              }
              this.saveing = false
            })
        }
      })
    },
    openVendor() {
      this.$refs.vendor.add()
    },
    getVendor(data) {
      this.vendorList = data
      this.form.vendorName = data[0].name
      this.$nextTick(()=>{
        this.$refs.form.clearValidate('vendorName')
      })
    },
  },
  computed: {
    SearchPanel() {
      return {
        '--searchPanel': this.searchPanel + 'px',
      }
    },
    ...mapState({
      headers: (state) => {
        return {Authorization: `Bearer ${state.login.currentUser.token}`}
      },
      action: function () {
        return window.context.portal + '/biz/universal/v1/minioUpload'
      },
    }),
  },
}
</script>

<style lang="scss" scoped>
/deep/.tox .tox-editor-header {
  z-index: auto;
}
.cloumn-btn {
  border: 1px solid #2761ff;
  padding: 3px 10px;
  border-radius: 5px;
  &:nth-child(1) {
    margin-right: 5px;
  }
  &:nth-child(2) {
    margin-right: 5px;
  }
  &:nth-child(1):hover {
    background-color: #2761ff;
    color: #fff;
  }
  &:nth-child(2):hover {
    background-color: #2761ff;
    color: #fff;
  }
  /deep/ i,
  span {
    font-size: 16px;
  }
}

/deep/ .el-tree-node__content {
  padding: 5px 0;
}

/deep/ .el-table thead tr th {
  background-color: #eee !important;
  border-right: 1px solid #dfe2e8 !important;
}
/deep/ .el-table {
  border-collapse: collapse !important;
}
.auto {
  display: none;
}
.classNone {
  display: block;
}
.rows:first-of-type {
  cursor: pointer;
}
// tinymce弹框遮罩层
div.mce-reset.mce-fade.mce-in {
  z-index: 9999 !important;
}

// tinymce弹框
div.mce-container.mce-panel.mce-floatpanel.mce-window.mce-in {
  z-index: 9999 !important;
}
</style>
