<template>
  <main>
    <div class="bg_white m-20" style="margin-bottom: 70px;">
      <div class="wrap text-black p-t-20 p-b-20 p-l-40 p-r-40">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="m-t-20" label-position="left">
          <div class="basic_info">
            <h3>基础信息</h3>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="编码" prop="" required>
                  <el-input v-model="form.id" style="width: 60%;" disabled="true" placeholder=""></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="版权类型" prop="copyright_type_id">
                  <el-select v-model="form.copyright_type_id" placeholder="请选择版权类型" disabled="true" @change="changeCopyrightType">
                    <el-option v-for="(item, index) in copyrightType" :key="index" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="8">
                <el-form-item label="名称" prop="name">
                  <el-input v-model="form.name" style="width: 60%;" placeholder="请输入名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="紧急程度" prop="urgency_degree">
                  <el-select v-model="form.urgency_degree" placeholder="请选择紧急程度" @change="changeUrgencyDegree">
                    <el-option v-for="(item, index) in urgencyDegree" :key="index" :label="item.name" :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
          <div class="others">
            <h3>附件上传</h3>
            <el-row v-if="type_id == 1">
              <el-col :span="8">
                <el-form-item label="申请表" prop="" required>
                  <el-upload
                    class="upload-demo"
                    :action="api_upload_url"
                    :with-credentials = "true"
                    :on-success="handleSuccess"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :before-upload="fileUpload"
                    :limit="1"
                    accept=".pdf, .xlsx, .docx, .doc, .xls"
                    :file-list="fileList"
                  >
                    <el-button size="small" type="primary">上传</el-button>
                    <template #tip>
                      <div class="el-upload__tip">
                        支持PDF、Word、Excel格式，限10M内
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="源程序代码" prop="" required>
                  <el-upload
                    class="upload-demo"
                    :action="api_upload_url"
                    :with-credentials = "true"
                    :on-success="handleSuccess1"
                    :on-preview="handlePreview1"
                    :on-remove="handleRemove1"
                    :before-upload="fileUpload"
                    :limit="1"
                    :on-exceed="handleExceed1"
                    accept=".pdf, .xlsx, .docx, .doc, .xls"
                    :file-list="fileList1"
                  >
                    <el-button size="small" type="primary">上传</el-button>
                    <template #tip>
                      <div class="el-upload__tip">
                        支持PDF、Word、Excel格式，限10M内
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="说明书" prop="" required>
                  <el-upload
                    class="upload-demo"
                    :action="api_upload_url"
                    :with-credentials = "true"
                    :on-success="handleSuccess2"
                    :on-preview="handlePreview2"
                    :on-remove="handleRemove2"
                    :before-upload="fileUpload"
                    :limit="1"
                    :on-exceed="handleExceed2"
                    accept=".pdf, .xlsx, .docx, .doc, .xls"
                    :file-list="fileList2"
                  >
                    <el-button size="small" type="primary">上传</el-button>
                    <template #tip>
                      <div class="el-upload__tip">
                        支持PDF、Word、Excel格式，限10M内
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-else>
              <el-col :span="8">
                <el-form-item label="作品说明书" prop="" required>
                  <el-upload
                    class="upload-demo"
                    :action="api_upload_url"
                    :with-credentials = "true"
                    :on-success="handleSuccess3"
                    :on-preview="handlePreview3"
                    :on-remove="handleRemove3"
                    :before-upload="fileUpload"
                    :limit="1"
                    :on-exceed="handleExceed3"
                    accept=".pdf, .xlsx, .docx, .doc, .xls"
                    :file-list="fileList3"
                  >
                    <el-button size="small" type="primary">上传</el-button>
                    <template #tip>
                      <div class="el-upload__tip">
                        支持PDF、Word、Excel格式，限10M内
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="法人作品声明" prop="" required>
                  <el-upload
                    class="upload-demo"
                    :action="api_upload_url"
                    :with-credentials = "true"
                    :on-success="handleSuccess4"
                    :on-preview="handlePreview4"
                    :on-remove="handleRemove4"
                    :before-upload="fileUpload"
                    :limit="1"
                    :on-exceed="handleExceed4"
                    accept=".pdf, .xlsx, .docx, .doc, .xls"
                    :file-list="fileList4"
                  >
                    <el-button size="small" type="primary">上传</el-button>
                    <template #tip>
                      <div class="el-upload__tip">
                        支持PDF、Word、Excel格式，限10M内
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="作品等级申请表" prop="" required>
                  <el-upload
                    class="upload-demo"
                    :action="api_upload_url"
                    :with-credentials = "true"
                    :on-success="handleSuccess5"
                    :on-preview="handlePreview5"
                    :on-remove="handleRemove5"
                    :before-upload="fileUpload"
                    :limit="1"
                    :on-exceed="handleExceed5"
                    accept=".pdf, .xlsx, .docx, .doc, .xls"
                    :file-list="fileList5"
                  >
                    <el-button size="small" type="primary">上传</el-button>
                    <template #tip>
                      <div class="el-upload__tip">
                        支持PDF、Word、Excel格式，限10M内
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="作品登记委托书" prop="" required>
                  <el-upload
                    class="upload-demo"
                    :action="api_upload_url"
                    :with-credentials = "true"
                    :on-success="handleSuccess6"
                    :on-preview="handlePreview6"
                    :on-remove="handleRemove6"
                    :before-upload="fileUpload"
                    :limit="1"
                    :on-exceed="handleExceed6"
                    accept=".pdf, .xlsx, .docx, .doc, .xls"
                    :file-list="fileList6"
                  >
                    <el-button size="small" type="primary">上传</el-button>
                    <template #tip>
                      <div class="el-upload__tip">
                        支持PDF、Word、Excel格式，限10M内
                      </div>
                    </template>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="作品样本" prop="" required>
                  <el-upload
                    class="upload-demo"
                    :action="api_upload_url"
                    :with-credentials = "true"
                    :on-success="handleSuccess7"
                    :on-preview="handlePreview7"
                    :on-remove="handleRemove7"
                    :before-upload="fileUpload"
                    :limit="1"
                    :on-exceed="handleExceed7"
                    accept=".pdf, .xlsx, .docx, .doc, .xls"
                    :file-list="fileList7"
                  >
                    <el-button size="small" type="primary">上传</el-button>
                    <template #tip>
                      <div class="el-upload__tip">
                        支持PDF、Word、Excel格式，限10M内
                      </div>
                    </template>
                  </el-upload>
                  <!-- <el-upload
                      ref="upload"
                      :action="api_upload_url"
                      list-type="picture-card"
                      name="img"
                      :with-credentials = "true"
                      :on-success="handlePhotoSuccess"
                      :on-preview="handlePhotoPreview"
                      multiple
                      :limit="4"
                      :on-remove="handlePhotoRemove"
                      accept=".jpg,.png"
                      :on-exceed="handlePhotoExceed"
                      :file-list="imgList"
                  >
                    <el-button size="small" type="text"><i class="el-icon-plus"></i></el-button>
                  </el-upload>
                  <div class="el-upload__tip f_12 l_height_25">支持png、jpg格式, 上限1M, 不超过4张, 需彩色图片</div>
                  <el-dialog v-model="dialogVisible">
                    <el-image width="100%" :src="dialogImageUrl" alt=""></el-image>
                  </el-dialog> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <h3>申请结果</h3>
                <el-radio-group v-model="form.apply_result" @change="changeApply">
                  <el-radio v-for="(item, index) in checkData" :key="index" :label="item.id">{{ item.name }}</el-radio>
                </el-radio-group>
              </el-col>
            </el-row>
            <h3>费用信息</h3>
            <el-row>
              <el-col :span="8">
                <el-form-item label="单价" prop="">
                  <el-input v-model="form.price" style="width: 60%;" placeholder="仅限数字，支持小数" @change="changePrice"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="数量" prop="">
                  <el-input v-model="form.num" style="width: 60%;" placeholder="仅限正整数" @change="changeNum"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="总计" prop="">
                  <el-input v-model="form.total_price" style="width: 60%;"  placeholder="" disabled="true"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
    </div>
    <div class="bg_white m-t-10 p-l-20 p-r-20 p-t-10 p-b-10 text-black footer" style="width:100%;">
      <el-button type="primary" class="search_button" @click="submitClick('form')">提交</el-button>
    </div>
  </main>
</template>

<script>
import { mapActions, mapState } from 'vuex'
export default {
  data() {
    return {
      form: {
        id: '',
        copyright_type_id: 1,
        name: '',
        urgency_degree: ''
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入版权名称',
            trigger: 'blur',
          }
        ],
        copyright_type_id: [
          {
            required: true,
            message: '请选择版权类型',
            trigger: 'change',
          }
        ],
        urgency_degree: [
          {
            required: true,
            message: '请选择紧急程度',
            trigger: 'change',
          }
        ]
      },
      fileList: [],
      fileList1: [],
      fileList2: [],
      imgList: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      fileList6: [],
      fileList7: [],
      dialogVisible: false,
      dialogImageUrl: '',
      copyrightType: [],
      urgencyDegree: [],
      checkData: [],
      isShowDemo: false,
      type_id: 1,
      edit_params: {
        name: '',
        copyright_type_id: '',
        urgency_degree: '',
        apply_file: '',
        code: '',
        instructions: '',
        demo: '',
        apply_result: '',
        price: '',
        num: '',
        total_price: '',
        art_dscription_form: '',
        art_corporation_statement: '',
        art_level_form: '',
        art_sign_file: ''
      },
      imgData: []
    }
  },
  computed: {
    api_upload_url() {
      return process.env.VUE_APP_API_BASEURL + 'admin/copyright/upload'
    },
    ...mapState({
      // 取出页面标签
      tags: (state) => state.topNavTag.tags
    })
  },
  created() {
    this.getList()
  },
  activated() {
    this.id = this.$route.query.id
    this.type_id = this.$route.query.type_id
    this.getDetail()
  },
  beforeRouteUpdate(to,from,next){
    this.id = to.query.id
    if(to.fullPath!=from.fullPath){
      this.getDetail()
      next()
    }
  },
  methods: {
    ...mapActions({
      // 关闭标签及页面
      handleCloseTag: 'topNavTag/removeNavTag'
    }),
    // 获取列表数据
    getList() {
      this.$http.get('copyright/constList').then(res => {
        console.log(res)
        const data = res.data.data
        this.copyrightType = data.copyright_type_id
        this.urgencyDegree = data.urgency_degree
        this.checkData = data.apply_result
      })
    },
    getDetail() {
      this.$http.get('copyright/read/id', { id: this.id }).then(res => {
        console.log(res)
        this.imgList = []
        if (res.status == 200) {
          this.form = res.data.data
          if(this.form.apply_file != null && this.form.apply_file != '') {this.fileList = [{name: '申请表', url: this.form.apply_file}]} 
          if(this.form.code != null && this.form.code != '') {this.fileList1 = [{name: '程序源代码', url: this.form.code}]}
          if(this.form.instructions != null && this.form.instructions != '') {this.fileList2 = [{name: '说明书', url: this.form.instructions}]}
          if(this.form.art_dscription_form != null && this.form.art_dscription_form != '') {this.fileList3 = [{name: '作品说明书', url: this.form.art_dscription_form}]}
          if(this.form.art_corporation_statement != null && this.form.art_corporation_statement != '') {this.fileList4 = [{name: '法人作品声明', url: this.form.art_corporation_statement}]}
          if(this.form.art_level_form != null && this.form.art_level_form != '') {this.fileList5 = [{name: '作品等级申请表', url: this.form.art_level_form}]}
          if(this.form.art_sign_file != null && this.form.art_sign_file != '') {this.fileList6 = [{name: '作品等级委托书', url: this.form.art_sign_file}]}
          if(this.form.demo != null && this.form.demo != '') {
            this.fileList7 = [{name: '作品样本', url: this.form.demo}]
            // const demo = this.form.demo.split(',')
            // demo.forEach(item => {
            //   this.imgList.push({name: '', url: item})
            // });
          }
          // 字符转数字类型
          this.form.apply_result = Number(this.form.apply_result)
          // 未做修改直接保存
          this.edit_params = {
            id: this.form.id,
            name: this.form.name,
            copyright_type_id: this.form.copyright_type_id,
            urgency_degree: this.form.urgency_degree,
            apply_file: this.form.apply_file,
            code: this.form.code,
            instructions: this.form.instructions,
            demo: this.form.demo,
            apply_result: this.form.apply_result,
            price: this.form.price,
            num: this.form.num,
            total_price: this.form.total_price,
            art_dscription_form: this.form.art_dscription_form,
            art_corporation_statement: this.form.art_corporation_statement,
            art_level_form: this.form.art_level_form,
            art_sign_file: this.form.art_sign_file
          }
        }
      })
    },
    //文件上传成功时
    handleSuccess(res, file, file_list) {
      console.log(res)
      if (res.status == 200) {
        this.edit_params.apply_file = res.data.data.url
      }
    },
    // 限制文件格式
    fileUpload(file) {
      console.log(file)
      const isLt5M = file.size / 1024 / 1024 < 10
      if (!isLt5M) {
          this.$message({
              message: '上传文件大小不能超过 10MB!',
              type: 'warning'
          })
          return false
      }
      // 文件格式拦截
      const fileType = file.type
      if (fileType != 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' && fileType != 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' &&
      fileType != 'application/pdf' && fileType != 'application/msword') {
          this.$message({
              message: '上传失败,当前文件格式无法上传！',
              type: 'warning'
          })
          return false
      }
    },
    handleRemove(file, fileList) {
      this.edit_params.apply_file = ''
    },
    //文件上传成功时1
    handleSuccess1(res, file, file_list) {
      if (res.status == 200) {
        this.edit_params.code = res.data.data.url
      }
    },
    handleRemove1(file, fileList) {
      this.edit_params.code = ''
    },
    //文件上传成功时2
    handleSuccess2(res, file, file_list) {
      if (res.status == 200) {
        this.edit_params.instructions = res.data.data.url
      }
    },
    handleRemove2(file, fileList) {
      this.edit_params.instructions = ''
    },
    //文件上传成功时3
    handleSuccess3(res, file, file_list) {
      if (res.status == 200) {
        this.edit_params.art_dscription_form = res.data.data.url
      }
    },
    handleRemove3(file, fileList) {
      this.edit_params.art_dscription_form = ''
    },
    //文件上传成功时4
    handleSuccess4(res, file, file_list) {
      if (res.status == 200) {
        this.edit_params.art_corporation_statement = res.data.data.url
      }
    },
    handleRemove4(file, fileList) {
      this.edit_params.art_corporation_statement = ''
    },
    //文件上传成功时5
    handleSuccess5(res, file, file_list) {
      if (res.status == 200) {
        this.edit_params.art_level_form = res.data.data.url
      }
    },
    handleRemove5(file, fileList) {
      this.edit_params.art_level_form = ''
    },
    //文件上传成功时6
    handleSuccess6(res, file, file_list) {
      if (res.status == 200) {
        this.edit_params.art_sign_file = res.data.data.url
      }
    },
    handleRemove6(file, fileList) {
      this.edit_params.art_sign_file = ''
    },
    //文件上传成功时6
    handleSuccess7(res, file, file_list) {
      if (res.status == 200) {
        this.edit_params.demo = res.data.data.url
      }
    },
    handleRemove7(file, fileList) {
      this.edit_params.demo = ''
    },
    //图片上传成功时
    handlePhotoSuccess(res, file, fileList) {
      console.log(fileList, 111)
      this.edit_params.demo = ''
      this.imgData = []
      fileList.forEach(item => {
        if (item.response) {
          this.imgData.push(item.response.data.data.url)
        } else {
          this.imgData.push(item.url)
        }
      })
      console.log(this.imgData, 2222)
      this.edit_params.demo = this.imgData.join(',')
    },
    //点击文件列表中已上传的文件时
    handlePhotoPreview(file) {},
    //文件列表移除
    handlePhotoRemove(file, fileList) {
      console.log(file, fileList)
      this.edit_params.demo = ''
      let imgs = []
      this.imgList = []
      // this.imgData = []
      fileList.forEach(item => {
        imgs.push(item.url)
        this.imgList.push({name: '', url: item.url})
      })
      console.log(imgs)
      // if (this.imgList.length != 0) {
      //   this.imgList.forEach(item => {
      //     this.imgData.push(item.url)
      //   })
      // }
      this.edit_params.demo = imgs.join(',')
    },
    //文件超出个数限制
    handlePhotoExceed(files, fileList) {
      const fileLen = files.length
      const listLen = fileList.length + fileLen
      if (fileLen > 4 || listLen > 4) {
        this.$message({
          message: '只能上传4张作品样本!',
          type: 'warning'
        })
        return false
      }
    },
    // 版权类型
    changeCopyrightType(val) {
      this.type_id = val
      this.edit_params.copyright_type_id = val
      if (val == 1) {
        this.fileList3 = []
        this.fileList4 = []
        this.fileList5 = []
        this.fileList6 = []
        this.fileList7 = []
        this.imgList = []
      } else {
        this.fileList = []
        this.fileList1 = []
        this.fileList2 = []
      }
    },
    // 紧急程度
    changeUrgencyDegree(val) {
      this.edit_params.urgency_degree = val
    },
    // 申请结果
    changeApply(val) {
      this.edit_params.apply_result = val
    },
    // 修改价格
    changePrice(val) {
      this.form.price = val
      this.edit_params.price = val
      this.calculation(val, this.edit_params.num)
    },
    // 修改数量
    changeNum(val) {
      this.form.num = val
      this.edit_params.num = val
      this.calculation(this.edit_params.price, val)
    },
    // 计算合计费用
    calculation(price, num) {
      price = Number(price)
      num = Number(num)
      let total_price = 0
      total_price = (price*num).toFixed(2)
      this.form.total_price = total_price
      this.edit_params.total_price = total_price
    },
    //提交
    submitClick(form) {
      this.edit_params.name = this.form.name
      console.log(this.edit_params)
      if (this.edit_params.copyright_type_id == 1) {
        if (this.edit_params.apply_file == '') {
          this.$message({
            type: 'error',
            message: '请上传申请表'
          })
          return false
        }
        if (this.edit_params.code == '') {
          this.$message({
            type: 'error',
            message: '请上传源程序代码'
          })
          return false
        }
        if (this.edit_params.instructions == '') {
          this.$message({
            type: 'error',
            message: '请上传说明书'
          })
          return false
        }
      } else {
        if (this.edit_params.art_dscription_form == '') {
          this.$message({
            type: 'error',
            message: '请上传作品说明书'
          })
          return false
        }
        if (this.edit_params.art_corporation_statement == '') {
          this.$message({
            type: 'error',
            message: '请上传法人作品声明'
          })
          return false
        }
        if (this.edit_params.art_level_form == '') {
          this.$message({
            type: 'error',
            message: '请上传作品等级申请表'
          })
          return false
        }
        if (this.edit_params.art_sign_file == '') {
          this.$message({
            type: 'error',
            message: '请上传作品登记委托书'
          })
          return false
        }
        if (this.edit_params.demo == '') {
          this.$message({
            type: 'error',
            message: '请上传作品样本'
          })
          return false
        }
      }
      this.$refs[form].validate((valid) => {
        if (!valid) {
          this.$message({
            type: 'error',
            message: '信息填写不完整！'
          })
          return false
        } else {
          this.$http.put('copyright/update/id', this.edit_params ).then(res => {
            if (res.status == 200) {
              this.$message({
                type: 'success',
                message: res.message
              })
              this.getDetail()
              this.fileList = []
              this.fileList1 = []
              this.fileList2 = []
              this.fileList3 = []
              this.fileList4 = []
              this.fileList5 = []
              this.fileList6 = []
              this.fileList7 = []
              this.imgList = []
              const currentPageName = this.$route.name
              const tags = this.tags
              const idx = tags.findIndex(it => it.name === currentPageName)
              if (idx >= 0) {
                this.handleCloseTag(idx)
              }
              this.$router.push({
                path: '/PIP/copyright'
              })
            } else {
              this.$message({
                type: 'error',
                message: res.message
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.basic_info{ border-bottom: 1px solid #dcdfe6;}
</style>