<template>
  <div class="edit-add-detail">
      <div class="crumbs">
          <Breadcrumb
              :breadcrumbOpt="breadcrumbOpt"
              svg-name="#icon-bill"
              @breadcrumb-click="handleClose"
          />
      </div>
      <div class="form-content">
          <el-form
              ref="formInfo"
              :model="parameter"
              label-width="auto"
              label-position="right"
              :rules="rules"
              v-loading="loading"
          >
              <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 class="row-box">
                  <el-row :gutter="24">
                      <el-col :span="12">
                          <el-form-item
                              label="创建企业"
                              prop="purchaserName"
                          >
                          <el-input readonly v-model="parameter.purchaserName" placeholder=""></el-input>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item
                              label="黑名单企业"
                              prop="supplierName"
                              class="input-select-item"
                          >
                              <multipleInput
                                  @click="open('poolUnits')"
                                  @delTags="
                                      (i) => deleteTags(i, 'supplierList')
                                  "
                                  :readonly="true"
                                  :selectData.sync="parameter.supplierName"
                                  placeholder="请选择黑名单企业"
                              >
                              </multipleInput>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <!-- <el-row :gutter="24">
                      <el-col :span="12">
                          <el-form-item
                              label="黑名单企业编号"
                              prop="supplierCode"
                          >
                              <el-input
                                  clearable
                                  v-model="parameter.supplierCode"
                                  placeholder="黑名单企业编号"
                                  disabled
                              ></el-input>
                          </el-form-item>
                      </el-col>
                  </el-row> -->
                  <el-row :gutter="24">
                      <el-col :span="12">
                          <el-form-item
                              label="黑名单加入时间"
                              prop="blacklistStartDate"
                          >
                              <el-date-picker
                                  v-model="parameter.blacklistStartDate"
                                  type="date"
                                  readonly
                                  value-format="yyyy-MM-dd"
                                  placeholder="请输入黑名单加入时间"
                                  style="width: 100%"
                              >
                              </el-date-picker>
                          </el-form-item>
                      </el-col>
                      <el-col :span="12">
                          <el-form-item
                              label="黑名单到期时间"
                              prop="blacklistExpireDate"
                          >
                              <el-date-picker
                                  v-model="parameter.blacklistExpireDate"
                                  type="date"
                                  value-format="yyyy-MM-dd"
                                  readonly
                                  placeholder="请输入黑名单到期时间"
                                  style="width: 100%"
                              >
                              </el-date-picker>
                          </el-form-item>
                      </el-col>
                  </el-row>
                  <el-row :gutter="12">
                      <el-col :span="12">
                          <el-form-item
                              label="加入黑名单原因"
                              prop="blacklistReason"
                          >
                              <el-input
                                  clearable
                                  readonly
                                  v-model="parameter.blacklistReason"
                                  placeholder="请输入加入黑名单原因"
                              ></el-input>
                          </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">
                      <div class="text-overflow">附件上传</div>
                  </div>
              </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 v-if="scope.row.fileSize">{{
                              scope.row.fileSize
                          }}</span>
                          <template v-else>
                              <span v-if="scope.row.size / 1024 / 1024 < 1">{{
                                  (scope.row.size / 1024).toFixed(2) + 'KB'
                              }}</span>
                              <span v-else>{{
                                  (scope.row.size / 1024 / 1024).toFixed(2) +
                                  'MB'
                              }}</span>
                          </template>
                      </template>
                  </el-table-column>
                  <el-table-column prop="createTime" label="上传时间">
                      <template slot-scope="scope">
                          <div>
                              {{ scope.row.response.value.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.response.value.url
                                      )
                                  "
                                  >下载</a
                              >
                          </el-button>
                      </template>
                  </el-table-column>
              </el-table>
          </el-form>
      </div>
      <div slot="footer" class="footer">
          <el-button @click="handleClose">{{
              $t('domestic.cancel')
          }}</el-button>
      </div>
      <expertPoolUnits
          @addDetail="(list) => addDetail(list, 'supplierList')"
          :useOrgList="supplierList"
          :needReturnKey="['code']"
          title="关联供应商"
          ref="poolUnits"
      />
      <expertOrgUnits
          @addDetail="(list) => addDetail(list, 'purchaserList')"
          :useOrgList="purchaserList"
          :needReturnKey="['code']"
          title="关联采购商"
          ref="orgunits"
      />
  </div>
</template>

<script>
import moment from 'moment'
import multipleInput from './multipleInput.vue'
import {mapState} from 'vuex'
import supplierManger from '@/api/supplierManger.js'
import Breadcrumb from '@/components/Breadcrumb/index.vue'
import expertOrgUnits from '../../onboardingSupplier/component/expertOrgUnits.vue'
import expertPoolUnits from '../../onboardingSupplier/component/expertPoolUnits.vue'
export default {
  name: 'domesticDialog',
  components: {
      Breadcrumb,
      expertPoolUnits,
      expertOrgUnits,
      multipleInput,
  },
  props: {
      editData: Object,
  },
  data() {
      return {
          saveing: false,
          breadcrumbOpt: [
              {breadcrumbName: '供应商黑名单'},
              {breadcrumbName: '新增'},
          ],

          rules: {
              supplierName: [
                  {
                      required: true,
                      message: '请选择供应商名称',
                      trigger: ['blur', 'change'],
                  },
              ],
              supplierCode: [
                  {
                      required: true,
                      message: '请输入供应商编号',
                      trigger: 'blur',
                  },
              ],
              purchaserName: [
                  {
                      required: true,
                      message: '请选择采购商名称',
                      trigger: ['blur', 'change'],
                  },
              ],
              purchaserCode: [
                  {
                      required: true,
                      message: '请输入采购商编号',
                      trigger: 'blur',
                  },
              ],
              blacklistStartDate: [
                  {
                      required: true,
                      message: '请选择黑名单加入时间',
                      trigger: 'blur',
                  },
              ],
              blacklistExpireDate: [
                  {
                      required: true,
                      message: '请选择黑名单到期时间',
                      trigger: 'blur',
                  },
              ],
              blacklistReason: [
                  {
                      required: true,
                      message: '请输入加入黑名单原因',
                      trigger: 'blur',
                  },
              ],
          },
          dataList: [],
          parameter: {
              blacklistStartDate: moment().format('YYYY-MM-DD'),
              blacklistExpireDate:moment().format('YYYY-MM-DD'),
          },
          loading: false,
          supplierList: [], //供应商
          purchaserList: [], //采购商
      }
  },
  computed: {
      ...mapState({
          headers: (state) => {
              return {
                  Authorization: `Bearer ${state.login.currentUser.token}`,
              }
          },
          action: function () {
              return window.context.portal + '/biz/universal/v1/minioUpload'
          },
      }),
  },
  created() {
      this.currentUser = JSON.parse(sessionStorage.getItem('currentUserDetail'))
      this.parameter.purchaserOrgId = this.currentUser.org[0].orgId
      this.parameter.purchaserName = this.currentUser.org[0].orgName
      this.parameter.purchaserCode = this.currentUser.org[0].orgCode
      this.addModifyBtn()
  },
  methods: {
      open(type) {
          this.$refs[type].add()
      },
      deleteTags(index, key) {
          if (!index) {
              this[key] = []
          } else {
              this[key].splice(index, 1)
          }
          this.updateParameterData(this[key], key)
      },
      addDetail(list, key) {
          this[key] = list
          this.updateParameterData(list, key)
      },
      updateParameterData(list, key) {
          let code = []
          list.forEach((item) => {
              code.push(item.code)
          })
          let fileName = key.replace('List', '')
          this.$set(this.parameter, fileName + 'Code', code.join(','))
          this.$set(this.parameter, fileName + 'Name', list)
      },
      //下载按钮回调
      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)
      },
      getByIdData(id) {
          let formData = new FormData()
          formData.append('id', id)
          supplierManger.getByIdBlacklist(formData).then((res) => {
              console.log(res,1111111);
              let data = res.data.value || {}
              let keysArr = [
                  'purchaserCode',
                  'purchaserName',
                  'purchaserOrgId',
                  'supplierCode',
                  'supplierId',
                  'supplierName',
              ]
              keysArr.forEach((key) => {
                  this.$set(data, key, data[key].split(','))
              })
              this.parameter = data
              this.dataList = data.accessoryList.map((item) => {
                  return {
                      uid: new Date().getTime(),
                      name: item.name,
                      fileSize: item.fileSize,
                      response: {
                          value: item,
                      },
                  }
              })
              // 对数据初始化
              data.purchaserOrgId.forEach((item, index) => {
                  this.purchaserList.push({
                      id: item,
                      name: data.purchaserName[index],
                      code: data.purchaserCode[index],
                  })
              })
              this.updateParameterData(this.purchaserList, 'purchaserList')
              data.supplierId.forEach((item, index) => {
                  this.supplierList.push({
                      id: item,
                      name: data.supplierName[index],
                      code: data.supplierCode[index],
                  })
              })
              this.parameter.purchaserName = this.parameter.purchaserName.map(item=>{
                  return item.name
              })
              this.updateParameterData(this.supplierList, 'supplierList')
          })
      },
      //列表删除行
      addTable() {
          this.parameter.detail.push({})
      },
      //列表删除行
      delTable(index, row) {
          this.parameter.detail.splice(index, 1)
          if (row.id) {
              this.parameter.deleteDetailsId.push(row.id)
          }
      },
      //编辑
      addModifyBtn() {
          let {id} = this.$route.params
          if (id) {
              this.getByIdData(id)
              this.breadcrumbOpt[1].breadcrumbName = '编辑'
          } else {
              this.breadcrumbOpt[1].breadcrumbName = '新增'
          }
      },
      // 关闭//面包屑点击
      handleClose() {
          if (this.breadcrumbOpt[1].breadcrumbName === '编辑') {
              this.$router.push({
                  name: 'blacklistSupplier',
                  params: {
                      pageBean: this.$route.query.pageBean,
                  },
              })
          } else {
              this.$router.push({
                  name: 'blacklistSupplier',
              })
          }

          // this.$emit('closeComponent')
          this.parameter = {}
          // this.$refs.formInfo.clearValidate()
      },
      // 保存
      handleSave() {
          this.$refs.formInfo.validate((valid) => {
              if (valid) {
                  this.saveing = true
                  let purchaserOrgId = []
                  let purchaserName = []
                  this.purchaserList.forEach((item) => {
                      purchaserOrgId.push(item.id)
                      purchaserName.push(item.name)
                  })
                  let supplierId = []
                  let supplierName = []
                  this.supplierList.forEach((item) => {
                      supplierId.push(item.id)
                      supplierName.push(item.name)
                  })
                  let params = {
                      ...this.parameter,
                      blacklistStatus: 0,
                      purchaserOrgId: purchaserOrgId.join(','),
                      purchaserName: purchaserName.join(','),
                      supplierId: supplierId.join(','),
                      supplierName: supplierName.join(','),
                      accessoryList: this.dataList.map(
                          (item) => item.response.value
                      ),
                  }
                  console.log(params, this.dataList)
                  supplierManger.saveBlacklist(params).then((res) => {
                      this.saveing = false
                      if (res.data.state) {
                          this.$confirm('保存成功，是否返回列表页?', '提示', {
                              confirmButtonText: '确定',
                              cancelButtonText: '取消',
                              type: 'success',
                          }).then(() => {
                              this.$router.push({
                                  name: 'blacklistSupplier',
                              })
                          })
                      } else {
                          this.loading = false
                          this.$message.error('保存失败！')
                      }
                  })
              }
          })
      },
  },
}
</script>

<style lang="scss"
scoped>
// .row-box {
//   padding-left: 25%;
// }

// /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;
      }
  }
}

.input-select-item {
  .el-form-item__content {
      position: relative;

      .input-select-val {
          height: 100%;
          position: relative;
          display: flex;
          align-items: center;
          flex-wrap: wrap;
          z-index: 1;
          padding: 2px 30px 2px 9px;
          margin-right: 56px;
          min-height: 40px;

          ::v-deep .el-tag--info {
              margin: 2px 0 2px 6px;
              display: flex;
              max-width: 100%;
              align-items: center;

              .el-tag__close {
                  background-color: #c0c4cc;
              }
          }
      }

      .el-input {
          position: absolute;
          height: 100%;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;

          ::v-deep .el-input__inner {
              height: 100%;
          }
      }
  }
}
</style>
