<template>
  <div v-loading="loading" class="creat_order">
    <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="order_form">
      <el-row :gutter="24" class="clearfix">
        <el-col :lg="12" :xl="8" class="col_item">
          <el-form-item label="项目名称" prop="pro_name">
            <el-select v-model="ruleForm.pro_name" class="form_select" filterable clearable placeholder="请选择项目名称">
              <el-option v-for="item in proData" :key="item.id" :label="item.project_name" :value="item.project_name"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="8" class="col_item">
          <el-form-item label="授权类型" prop="auth_type">
            <el-select v-model="ruleForm.auth_type" class="form_select" filterable clearable placeholder="请选择授权类型">
              <el-option v-for="item in authTypeData" :key="item.id" :label="item.name" :value="item.name"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="8" class="col_item">
          <el-form-item label="交换机类型" prop="oem_name">
            <el-select v-model="ruleForm.oem_name" class="form_select" filterable clearable placeholder="请选择交换机类型">
              <el-option v-for="item in switchTypeData" :key="item.id" :label="item.name" :value="item.name"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="8" class="col_item">
          <el-form-item label="到期时间" prop="authendtime">
            <el-date-picker
              v-model="ruleForm.authendtime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              align="left"
              placeholder="请选择授权到期时间" />
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="8" class="col_item">
          <el-form-item label="软授权码" prop="auth_code">
            <el-input v-model="ruleForm.auth_code" clearable placeholder="请输入软授权码"/>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="8" class="col_item">
          <el-form-item label="授权数量" prop="auth_num">
            <el-input-number v-model="ruleForm.auth_num" :min="0" label="请输入授权数量"/>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="8" class="col_item">
          <el-form-item label="项目进度" prop="pro_progress">
            <el-select v-model="ruleForm.pro_progress" class="form_select" filterable clearable placeholder="请选择项目进度">
              <el-option v-for="item in proSpeedData" :key="item.id" :label="item.name" :value="item.name"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="8" class="col_item">
          <el-form-item label="销售负责人" prop="sale_manager">
            <el-select v-model="ruleForm.sale_manager" class="form_select" filterable clearable placeholder="请选择销售负责人">
              <el-option v-for="item in saleUserOptions" :key="item.id" :label="`${item.username}(${item.usercode})`" :value="item.username"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="8" class="col_item">
          <el-form-item label="项目实施人" prop="pro_executor">
            <el-select v-model="ruleForm.pro_executor" class="form_select" filterable clearable placeholder="请选择项目实施人">
              <el-option v-for="item in proUserOptions" :key="item.id" :label="`${item.username}(${item.usercode})`" :value="item.username"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="8" class="col_item">
          <el-form-item label="产品负责人" prop="product_manager">
            <el-select v-model="ruleForm.product_manager" class="form_select" filterable clearable placeholder="请选择产品负责人">
              <el-option v-for="item in prodUserOptions" :key="item.id" :label="`${item.username}(${item.usercode})`" :value="item.username"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="8" class="col_item">
          <el-form-item label="财务负责人" prop="finance_manager">
            <el-select v-model="ruleForm.finance_manager" class="form_select" filterable clearable placeholder="请选择财务负责人">
              <el-option v-for="item in financeUserOptions" :key="item.id" :label="`${item.username}(${item.usercode})`" :value="item.username"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="12" :xl="8" class="col_item">
          <el-form-item label="总经理" prop="general_manager">
            <el-select v-model="ruleForm.general_manager" class="form_select" filterable clearable placeholder="请选择总经理">
              <el-option v-for="item in generalUserOptions" :key="item.id" :label="`${item.username}(${item.usercode})`" :value="item.username"/>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :lg="24" :xl="24" class="col_item">
          <el-form-item label="是否到期" prop="isend">
            <el-radio-group v-model="ruleForm.isend">
              <el-radio :label="0" border>未到期</el-radio>
              <el-radio :label="1" border>已到期</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :lg="24" :xl="24">
          <el-form-item label="情况备注" prop="content" >
            <el-input :autosize="{ minRows: 4}" v-model="ruleForm.content" placeholder="请输入情况备注" type="textarea"/>
          </el-form-item>
        </el-col>
        <!-- <el-form-item label="附件" prop="files">
								<el-upload
									ref="upload"
									class="uploadFiles"
									list-type="picture"
									multiple
									:action= uploadData.uploadUrl
									:data = uploadData.uploaderFiles
									:on-success="uploadSuccess"
									:on-error="uploadError"
									:on-remove="uploadRemove">
									<el-button size="small" type="primary">点击上传</el-button>
								</el-upload>
							</el-form-item> -->
        <el-col :lg="24" :xl="24">
          <el-form-item>
            <el-button type="primary" @click="submitForm">保存</el-button>
            <el-button @click="resetForm">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

import { getDictionary, getPro } from '@/api/commonAPI'
import { getUserSelects } from '@/api/systemSetup/roleSetting/userManage'
import { getAuth, addAuth, editAuth } from '@/api/authorization/authorList'
import { validateTel } from '@/utils/validate'
import { delFiles, filterContent } from '@/utils'

export default {
  name: 'AddOrEditAuthor',
  props: {
    rowid: {
      type: String,
      default: ''
    },
    layerid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      uploadData: {
        // 文件上传数据
        uploadUrl: this.$store.getters.serverConfig.BASE_API + 'fileserverapi/Api/Upload',
        uploaderFiles: {
          // 上传文件的参数 //是	string	模块code，如：test
          uploadtype: 'authFiles'
        }
      },
      proData: [], // 项目下拉数据
      authTypeData: [], // 授权类型下拉数据
      switchTypeData: [], // 交换机类型下拉数据
      proSpeedData: [], // 项目进度下拉数据
      saleUserOptions: [], // 销售负责人下拉数据
      proUserOptions: [], // 项目实施人下拉数据
      prodUserOptions: [], // 产品负责人下拉数据
      financeUserOptions: [], // 财务负责人下拉数据
      generalUserOptions: [], // 总经理下拉数据
      ruleForm: {
        id: '', // id标识
        pro_name: '', // 项目名称
        auth_type: '', // 授权类型
        oem_name: '', // 交换机类型
        authendtime: '', // 授权到期时间
        auth_code: '', // 软授权码
        auth_num: '', // 授权数量
        pro_progress: '', // 项目进度
        sale_manager: '', // 销售负责人
        pro_executor: '', // 项目实施人
        product_manager: '', // 产品负责人
        finance_manager: '', // 财务负责人
        general_manager: '', // 总经理
        isend: '', // 是否到期
        content: '' // 情况备注
        // files: [], //否	list	附件json
      },
      rules: {
        pro_name: [
          {
            required: true,
            message: '请选择项目名称',
            trigger: 'blur'
          }
        ],
        auth_type: [
          {
            required: true,
            message: '请选择授权类型',
            trigger: 'blur'
          }
        ],
        oem_name: [
          {
            required: true,
            message: '请选择交换机类型',
            trigger: 'blur'
          }
        ],
        authendtime: [
          {
            required: true,
            message: '请选择授权到期时间',
            trigger: 'blur'
          }
        ],
        auth_code: [
          {
            required: true,
            message: '请选择软授权码',
            trigger: 'blur'
          }
        ],
        auth_num: [
          {
            required: true,
            message: '请选择授权数量',
            trigger: 'blur'
          }
        ],
        pro_progress: [
          {
            required: true,
            message: '请选择项目进度',
            trigger: 'blur'
          }
        ],
        sale_manager: [
          {
            required: true,
            message: '请选择销售负责人',
            trigger: 'blur'
          }
        ],
        pro_executor: [
          {
            required: true,
            message: '请选择项目实施人',
            trigger: 'blur'
          }
        ]
      },
      loading: false
    }
  },
  computed: { },
  created() {
    Promise.all([
      this.getProSelect(), // 获取项目下拉
      this.getTypeSelect('SQLX'), // 获取授权类型下拉
      this.getTypeSelect('JHJLX'), // 获取交换机类型下拉
      this.getTypeSelect('XMJD'), // 获取项目进度下拉
      this.getUserSelect('5c47d992d2bc5f5d5907f2a0'), // 销售负责人下拉
      this.getUserSelect('5c47d983d2bc5f5d5907f29e'), // 项目实施人下拉
      this.getUserSelect('5c47d9a1d2bc5f5d5907f2a2'), // 产品负责人下拉
      this.getUserSelect('5c47d989d2bc5f5d5907f29f'), // 财务负责人下拉
      this.getUserSelect('5c47d9b5d2bc5f5d5907f2a3') // 总经理下拉
    ]).then(() => {
      if (this.rowid) {
        this.ruleForm.id = this.rowid
        this.getDetail(this.rowid)
      }
    })
  },
  methods: {
    submitForm() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.ruleForm.content = filterContent.delHtmlTag(this.ruleForm.content) // 保存内容时去掉 html 标签
          this.loading = true
          if (!this.rowid) {
            addAuth(this.ruleForm)
              .then(response => {
                this.loading = false
                if (response.state.toLowerCase() === 'success') {
                  this.$parent.$layer.close(this.layerid)
                  this.$parent.getList() // 重新加载父级数据
                  this.$message.success('恭喜你，项目授权信息添加成功!')
                }
              })
              .catch(() => {
                this.loading = false
              })
            return
          }
          // 编辑
          editAuth(this.ruleForm)
            .then(response => {
              this.loading = false
              if (response.state.toLowerCase() === 'success') {
                this.$parent.$layer.close(this.layerid)
                this.$parent.getList() // 重新加载父级数据
                this.$message.success('恭喜你，项目授权信息编辑成功!')
              }
            })
            .catch(() => {
              this.loading = false
            })
        } else {
          this.$message.error('请输入有效的必填项信息!')
          return false
        }
      })
    },
    resetForm() {
      // if (this.ruleForm.files.length > 0) {
      //   for (let i = this.ruleForm.files.length - 1; i >= 0; i--) {
      //     delFiles(this.ruleForm.files[i].filesmallurl, this.ruleForm.files[i].fileurl)
      //     this.ruleForm.files.splice(i, 1)
      //   }
      // }
      // this.$refs.upload.clearFiles()	// 清空已上传的文件列表（该方法不支持在 before-upload 中调用）

      this.$refs.ruleForm.resetFields()
    },
    // 获取详情
    getDetail(rid) {
      getAuth(rid).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.data
          this.ruleForm.pro_name = res.pro_name // 项目名称
          this.ruleForm.auth_type = res.auth_type // 授权类型
          this.ruleForm.oem_name = res.oem_name // 交换机类型
          this.ruleForm.authendtime = res.authendtime // 授权到期时间
          this.ruleForm.auth_code = res.auth_code // 软授权码
          this.ruleForm.auth_num = res.auth_num // 授权数量
          this.ruleForm.pro_progress = res.pro_progress // 项目进度
          this.ruleForm.sale_manager = res.sale_manager // 销售负责人
          this.ruleForm.pro_executor = res.pro_executor // 项目实施人
          this.ruleForm.product_manager = res.product_manager // 产品负责人
          this.ruleForm.finance_manager = res.finance_manager // 财务负责人
          this.ruleForm.general_manager = res.general_manager // 总经理
          this.ruleForm.isend = res.isend // 是否到期
          this.ruleForm.content = res.content// 情况备注
        }
      })
    },
    // 获取项目下拉
    getProSelect() {
      return new Promise(resolve => {
        getPro().then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.proData = response.data.rows
          }
        })
        resolve()
      })
    },
    // 获取类型下拉
    getTypeSelect(code) {
      return new Promise(resolve => {
        getDictionary(code).then(response => {
          if (response.state.toLowerCase() === 'success') {
            switch (code) {
              case 'SQLX':
                this.authTypeData = response.data // 获取授权类型
                break
              case 'JHJLX':
                this.switchTypeData = response.data // 获取交换机类型
                break
              case 'XMJD':
                this.proSpeedData = response.data // 获取项目进度
                break
              default:
                break
            }
          }
        })
        resolve()
      })
    },
    // 获取负责人
    getUserSelect(code) {
      return new Promise(resolve => {
        getUserSelects(code).then(response => {
          if (response.state.toLowerCase() === 'success') {
            switch (code) {
              case '5c47d992d2bc5f5d5907f2a0':
                this.saleUserOptions = response.data// 销售负责人下拉数据
                break
              case '5c47d983d2bc5f5d5907f29e':
                this.proUserOptions = response.data// 项目实施人下拉数据
                break
              case '5c47d9a1d2bc5f5d5907f2a2':
                this.prodUserOptions = response.data// 产品负责人下拉数据
                break
              case '5c47d989d2bc5f5d5907f29f':
                this.financeUserOptions = response.data// 财务负责人下拉数据
                break
              case '5c47d9b5d2bc5f5d5907f2a3':
                this.generalUserOptions = response.data// 总经理下拉数据
                break
              default:
                break
            }
          }
        })
        resolve()
      })
    },
    // 文件上传
    uploadSuccess(response, file, fileList) {
      if (response.state.toLowerCase() === 'success') {
        this.ruleForm.files.push(response.data[0])
      } else {
        this.$message.error(response.message)
      }
    },
    uploadRemove(file, fileList) {
      if (this.ruleForm.files.length > 0) {
        for (let i = 0, len = this.ruleForm.files.length; i < len; i++) {
          if (this.ruleForm.files[i].filename === file.name) {
            delFiles(
              this.ruleForm.files[i].filesmallurl,
              this.ruleForm.files[i].fileurl
            )
            this.ruleForm.files.splice(i, 1)
            return
          }
        }
      }
    },
    uploadError(err, file, fileList) {
      // console.log(err)
      this.$message.error(err)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
	.order_form{
    .form_select,
    .el-date-editor.el-input{
      width: 100%;
    }
  }

</style>

<style rel="stylesheet/scss" lang="scss" scoped>
	.creat_order{
		margin-top: 20px;
    .col_item{
			height: 51px;
		}
	}
</style>
