<!--
  @description:专家库-编辑项目
  @Modifier:肖文龙
  @routerPath: /expert/createExtractProject-add
  @date:2020-8-25
-->
<template>
  <div>
    <section class="title title_border p0-16 clearfix">
      <template>
        <!-- 创建项目 -->
        <div v-if="!tenderId">
          <i class="el-icon-s-home" />
          创建项目
        </div>
        <!-- 编辑项目 -->
        <div v-else class="pointer" @click="back">
          <i class="iconfont icon-fanhui mr10" />
          编辑项目
        </div>
      </template>
    </section>
    <div class="p0-16">
      <el-form
        ref="formData"
        :model="formData"
        :rules="rules"
        :inline-message="true"
      >
        <div class="page-title">
          1.项目信息
        </div>
        <table class="from_table">
          <tr>
            <td><el-form-item ref="tenderName" label="项目名称" prop="tenderName" /></td>
            <td>
              <gx-input
                v-model.trim="formData.tenderName"
                placeholder="最多允许输入300个汉字(600字符)"
                gx-maxlength="varchar600"
                show-word-limit
                class="show-word-limit-padding"
              />
            </td>
            <td>
              <el-form-item ref="tenderNo" label="项目编号" prop="tenderNo" />
            </td>
            <td>
              <gx-input v-model="formData.tenderNo" gx-maxlength="varchar200" placeholder="项目编号" />
            </td>
          </tr>
          <tr>
            <td><el-form-item ref="isPack" label="是否分包" prop="isPack" /></td>
            <td>
              <el-radio-group v-model="formData.isPack">
                <el-radio v-for="(item,index) in isPackList" :key="index" :label="item.typecode">
                  {{ item.typename }}
                </el-radio>
              </el-radio-group>
            </td>
            <td />
            <td />
          </tr>
        </table>
        <!-- 分包时-展示 -->
        <template v-if="formData.isPack==='01'">
          <div class="page-title">
            2.标段信息
          </div>
          <div class="mb10">
            <el-button type="primary" @click="batchAdd('batch')">
              批量添加
            </el-button>
            <el-button type="primary" @click="batchAdd">
              添加
            </el-button>
            <el-button @click="editPack(false)">
              保存
            </el-button>
            <el-button @click="editPack(true)">
              编辑
            </el-button>
            <el-button @click="deletePack('delete')">
              删除
            </el-button>
            <el-button>模板上传</el-button>
            <el-button>下载模板</el-button>
          </div>
          <div>
            <el-table
              ref="package"
              :data="formData.packageList"

              @selection-change="selectChange"
            >
              <el-table-column type="selection" align="center" width="50" />
              <el-table-column
                type="index"
                label="序号"
                width="60"
                align="center"
              />
              <el-table-column

                min-width="110"
                header-align="center"
              >
                <template slot="header">
                  <span class="red-star">*</span>
                  <span>标段（包）编号</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item :prop="'packageList.' + scope.$index + '.packNo'" :rules="rules.packNo">
                    <gx-input
                      v-show="scope.row.state"
                      v-model.trim="scope.row.packNo"
                      gx-maxlength="varchar200"
                      size="mini"
                    />
                    <span v-show="!scope.row.state" v-text="scope.row.packNo" />
                  </el-form-item>
                </template>
              </el-table-column>
              <el-table-column

                min-width="110"
                header-align="center"
              >
                <template slot="header">
                  <span class="red-star">*</span>
                  <span>标段（包）名称</span>
                </template>
                <template slot-scope="scope">
                  <el-form-item :prop="'packageList.' + scope.$index + '.packName'" :rules="rules.packName">
                    <gx-input
                      v-show="scope.row.state"
                      v-model.trim="scope.row.packName"
                      gx-maxlength="varchar500"
                      size="mini"
                    />
                    <span v-show="!scope.row.state" v-text="scope.row.packName" />
                  </el-form-item>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </template>
      </el-form>
    </div>
    <!--保存按钮-->
    <div class="but_footer">
      <div class="but_footer-h" />
      <div class="but_footer-but">
        <el-button :loading="saveLoading" @click="saveData('00')">
          保存
        </el-button>
        <el-button :loading="confirmLoading" type="primary" @click="submit('01')">
          生效
        </el-button>
      </div>
    </div>
  </div>
</template>
<script>
/* api */
import { saveOrUpdateProject, queryProjectDetailById } from '@/api/expert/expertscloud.js'
/* 公用方法*/
import { cloneObject } from '@/assets/js/utils'// 常用方法
/* 正则 */
import { characters1_auto, validateRoleCode, validateInput } from '@/assets/js/validate'// 校验输入内容
/* 混入 */
import { extractProjectMixin } from '../mixins/extractProjectMixins'// 字典信息
export default {
  mixins: [extractProjectMixin],
  data() {
    return {
      confirmLoading: false,
      saveLoading: false,
      tenderId: this.$route.params.id, // 项目id
      // 项目信息
      formData: {
        id: this.$route.params.id, // 项目id
        packageList: [], // 标段（包）
        tenderName: '', // 项目名称
        tenderNo: '', // 项目编号
        isPack: '01', // 是否分包 00 否 01 是
        useStatus: '01', // 必填 01 正式数据
        auditStatus: '' // 状态值 00 保存 01 提交
      },
      // 创建标段（包）=>信息
      addPackage: {
        tenderId: '', // 项目id
        id: '', // 标段id
        packName: '', // 项目名称
        packNo: '', // 项目编号
        state: true // 设置表格为可编辑状态
      },
      // 选择的标段
      selectData: [],
      // 校验正则
      rules: {
        tenderNo: [
          { required: true, validator: characters1_auto, trigger: 'blur' },
          { validator: validateInput, trigger: 'blur' },
          { validator: validateRoleCode, trigger: 'blur' }
        ], // 项目编号
        tenderName: [
          { required: true, validator: characters1_auto, trigger: 'blur' },
          { validator: validateInput, trigger: 'blur' }], // 项目名称
        packNo: [
          { required: true, validator: characters1_auto, trigger: 'blur' },
          { validator: validateInput, trigger: 'blur' },
          { validator: validateRoleCode, trigger: 'blur' }
        ], // 标段(包）编号
        packName: [
          { required: true, validator: characters1_auto, trigger: 'blur' },
          { validator: validateInput, trigger: 'blur' }], // 标段(包）名称
        isPack: [{ required: true, message: '请选择', trigger: 'change' }] // 是否分包
      }
    }
  },
  created() {
    // 获取项目信息
    this.initData()
  },
  methods: {
    // 返回
    back() {
      this.$router.push('/expert/createExtractProject-list')
    },
    // 选择标段
    selectChange(val) {
      this.selectData = val
    },
    // 获取项目信息
    initData() {
      if (!this.formData.id) return
      queryProjectDetailById(this.formData.id).then(res => {
        this.$set(this, 'formData', res.data)
        // 初始化
        this.$set(this.formData, 'this.formData', this.formData.packageList || [])
        this.formData.packageList.forEach((item) => {
          item.state = false
        })
      })
    },
    // 保存
    saveData(auditStatus) {
      this.saveLoading = true
      this.formData.auditStatus = auditStatus// 保存状态
      this.formData.useStatus = auditStatus // 必填 01 正式数据
      this.formData.packageList.forEach(item => {
        item.tenderId = this.formData.id// 项目id
      })
      // 不分包时
      if (this.formData.isPack === '00') {
        this.formData.packageList = []
      }
      saveOrUpdateProject(this.formData).then(res => {
        if (auditStatus === '01') {
          // 提交
          this.$router.push('/expert/createExtractProject-list')
        } else {
          // 保存
          // 获取项目id
          this.formData.id = res.data
          // 获取项目信息
          this.initData()
          this.$message({
            message: '保存成功',
            type: 'success'
          })
        }
        this.saveLoading = false
      })
    },
    // 提交
    submit(auditStatus) {
      this.confirmLoading = true
      this.$refs.formData.validate(valid => {
        if (valid) {
          // 分包&&标段数量大于0 或着 不分包
          if (this.formData.isPack === '01' && this.formData.packageList.length > 0 || this.formData.isPack === '00') {
            this.$confirm('确认生效吗？', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              this.saveData(auditStatus)
            })
          } else {
            // 请添加标段
            this.$message({
              type: 'warning',
              message: '请添加标段（包）'
            })
          }
        }
      })
      this.confirmLoading = true
    },
    // 标段信息-保存/编辑/删除
    // state: true 编辑 false 保存 delete 删除
    editPack(state) {
      if (this.selectData.length > 0) {
        this.selectData.forEach((item) => {
          this.$set(item, 'state', state)
        })
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        // 取消选择
        this.$refs.package.clearSelection()
      } else {
        // 未选中
        this.$message({
          type: 'warning',
          message: '请选择标段（包）'
        })
      }
    },
    // 标段信息-删除
    deletePack() {
      if (this.selectData.length > 0) {
        this.$confirm('确认删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.selectData.forEach((item) => {
            this.formData.packageList.splice(this.formData.packageList.lastIndexOf(item), 1)
          })
          this.$message({
            message: '操作成功',
            type: 'success'
          })
          // 取消选择
          this.$refs.package.clearSelection()
        })
      } else {
        // 未选中
        this.$message({
          type: 'warning',
          message: '请选择标段（包）'
        })
      }
    },
    // 批量添加/添加
    // type : batch 批量创建
    batchAdd(type) {
      if (type === 'batch') {
        this.$prompt('创建标段数量', '批量创建标段', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          confirmButtonClass: 'confirmBtn',
          cancelButtonClass: 'cancelBtn',
          inputPattern: /^[1-9]{1}[\d]*$/,
          inputErrorMessage: '请输入创建标段数量'
        }).then(({ value }) => {
          for (let i = value; i--; i > 0) {
            const data = cloneObject(this.addPackage) // 深层拷贝要创建的标包信息
            this.formData.packageList.unshift(data)
          }
        })
      } else {
        // 单次添加
        const data = cloneObject(this.addPackage) // 深层拷贝要创建的标包信息
        this.formData.packageList.unshift(data)
      }
    }
  }
}
</script>
<style lang="less" scoped>
  /deep/.el-form-item--small.el-form-item{
    margin: 0;
  }
</style>

