<template>
  <div class="app-container">
    <el-container>
      <el-header>
        <div>新增文件</div>
        <el-divider/>
      </el-header>
      <el-main>
        <div class="form-main">
          <el-form ref="formAdd" v-loading="$store.state.app.isLoading" :label-width="'120px'" :model="list"
                   :rules="rules"
          >
            <el-form-item label="APP名称" prop="AppName">
              <el-input v-model="list.AppName" placeholder="输入APP名称"/>
            </el-form-item>
            <el-form-item label="上传类型" prop="">
              <el-input v-model="list.AppName" placeholder="请选择上传类型"/>
            </el-form-item>
            <el-form-item label="选择系统" prop="grayFlag">
              <div class="tag-group">
                <el-tag :type="list.platform=='android'?'':'info'" @click="list.platform='android'">安卓</el-tag>
                <el-tag :type="list.platform=='IOS'?'':'info'" @click="list.platform='IOS'">IOS</el-tag>
                <el-tag :type="list.platform=='HarmonyOS'?'':'info'" @click="list.platform='HarmonyOS'">鸿蒙</el-tag>
              </div>
            </el-form-item>
            <el-form-item v-if="list.platform!=='IOS'" label="安装包" prop="upgradeMode">
              <el-input v-model="list.packName" class="input-with-select" placeholder="请选择包" readonly>
                <el-button slot="append" icon="el-icon-search" @click="handlePackOpen"></el-button>
              </el-input>
            </el-form-item>
            <el-form-item v-else label="APP Store地址" prop="AppLink">
              <el-input v-model="list.AppLink" placeholder="请输入APPStore地址"/>
            </el-form-item>
            <el-form-item label="版本号" prop="versionNumber">
              <el-input v-model="list.versionNumber" class="remark-input" maxlength="500" placeholder="输入版本号"
                        show-word-limit
              />
            </el-form-item>
            <el-form-item label="版本说明">
              <el-input v-model="list.imprint" class="remark-input" maxlength="500" placeholder="输入版本描述"
                        show-word-limit
                        type="textarea"
              />
            </el-form-item>
            <!--        根据需求确认是否需要这些条件-->
            <!--        <el-form-item label="发布环境" prop="releaseDestType">-->
            <!--          <el-radio v-model="list.releaseDestType" label="0">开发环境</el-radio>-->
            <!--          <el-radio v-model="list.releaseDestType" label="1">测试发布</el-radio>-->
            <!--          <el-radio v-model="list.releaseDestType" label="2">生产发布</el-radio>-->
            <!--        </el-form-item>-->
            <!--        <el-form-item label="发布策略" prop="releaseDestType">-->
            <!--          <el-radio v-model="list.releaseDestType" label="0">灰度发布</el-radio>-->
            <!--          <el-radio v-model="list.releaseDestType" label="1">全量发布</el-radio>-->
            <!--          <el-radio v-model="list.releaseDestType" label="2">回滚发布</el-radio>-->
            <!--        </el-form-item>-->
            <el-form-item label="结果通知">
              <el-switch
                  v-model="list.enableVerify"
              />
            </el-form-item>
            <el-form-item label="强制更新">
              <el-switch
                  v-model="list.enableVerify"
              />
            </el-form-item>
            <el-form-item label="公开版">
              <el-switch
                  v-model="list.enableVerify"
              />
            </el-form-item>
            <el-form-item label="下载验证">
                <span slot="label">
                  下载验证
                  <el-tooltip class="item-tooltip"
                              content="当验证开关开启时，为发布包生成下载二维码的同时，也会生成一个6位验证码，扫描二维码后需经过验证码才可下载发布."
                              effect="dark"
                              placement="right"
                  >
                    <i class="el-icon-question"/>
                  </el-tooltip>
                </span>
              <el-switch
                  v-model="list.downVerifi"
              />
            </el-form-item>
            <el-form-item label="更新客群">
              <el-radio v-model="list.numType" label="0">白名单客户</el-radio>
              <el-radio v-model="list.numType" label="1">普通客户</el-radio>
            </el-form-item>
            <el-form-item label="有效期">
              <template>
                <div class="block">
                  <el-date-picker
                      v-model="list.expiryTime"
                      end-placeholder="结束日期"
                      range-separator="-"
                      start-placeholder="开始日期"
                      style="width: 240px"
                      type="daterange"
                      value-format="yyyy-MM-dd"
                  ></el-date-picker>
                </div>
              </template>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="list.desp" class="remark-input" maxlength="50" placeholder="请输入备注" show-word-limit
                        type="textarea"
              />
            </el-form-item>
          </el-form>
        </div>
      </el-main>
      <!--安装包弹窗-->
      <AddPack :visible.sync="packOpen" @close="closeAddPack"></AddPack>
    </el-container>
  </div>

</template>
<script>
import AddPack from '@/views/FDS/publishList/components/addPack.vue'

export default {
  name: 'PublishAdd',
  dicts: ['sys_yes_no'],
  components: {
    AddPack
  },
  data() {
    // var checkHeader = (rule, value, callback) => {
    //   if (this.list.rule.customRule) {
    //     value.forEach(ele => {
    //       for (const key in ele) {
    //         if (Object.hasOwnProperty.call(ele, key)) {
    //           const item = ele[key]
    //           if (!item && key !== 'desp') {
    //             return callback(new Error('请输入自定义规则必填项'))
    //           }
    //         }
    //       }
    //     })
    //   }
    //   callback()
    // }
    // var checkRadix = (rule, value, callback) => {
    //   if (this.list.rule.regularRule && !value) {
    //     return callback(new Error('请选择常用规则'))
    //   }
    //   callback()
    // }
    return {
      selectValue: 'code',
      list: {
        rule: {
          regularRule: false,
          customRule: false
        },
        // headerOperations: [],
        packId: '', // 安装包ID
        grayFlag: '0', // 发布类型: 0灰度 1正式
        upgradeMode: '0', //
        releaseDestType: '0', // 发布条件： 0白名单 1时间窗
        headerOperations: [// 自定义规则
          // {
          //   'scope': '', // 范围：region地区 platform平台
          //   'inclued': '', // 是否包含  1包含 2不包含
          //   'condition': '', // 发布条件
          //   'desp': ''// 备注
          // }
        ],
        grayUserNum: '', // 灰度人数
        numType: '0',
        expiryTime: '', // 灰度结束时间
        desp: '',
        releaseRuleId: '', // 常用规则
        // deviceListId: '', // 设备白名单
        whiteListId: '',// 用户白名单id
        enableVerify: false, //是否开启下载验证
        imprint: '', //版本说明
        versionNumber: '',
        AppName: '', //APP名称
        platform: 'android' //系统
      },
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      packOpen: false,
      // 遮罩层
      loading: true,
      dataList: [],

      rules: {
        grayFlag: [
          { required: true }
        ],
        upgradeMode: [
          { required: true }
        ],
        upgradeDesp: [
          { required: true, message: '请输入升级描述', trigger: 'change' }
        ],
        releaseDestType: [
          { required: true }
        ],
        whiteListId: [
          { required: true, message: '请选择白名单', trigger: 'change' }
        ],
        expiryTime: [
          { required: true, message: '请选择发布时间', trigger: 'blur' }
        ],
        grayUserNum: [
          { required: true, message: '请输入灰度人数', trigger: 'blur' }
        ]
      }
    }
  },
  computed: {},

  // mounted() {
  //   if (this.$route.query.data) {
  //     const params = JSON.parse(this.$route.query.data)
  //     this.list.packId = params.id
  //     this.list.version = params.version
  //     this.list.platformName = params.platform === '0' ? 'Android' : 'IOS'
  //   }
  // },
  methods: {
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = []
      this.resetForm('queryForm')
      this.handleQuery()
    },
    /** 在上传之前进行校验 */
    beforeAvatarUpload(file) {
      const formatList = file.name.split('.')
      const isFormat = file.type === 'text/plain' || formatList[formatList.length - 1] === 'txt'
      if (!isFormat) {
        this.$message.error(`上传格式只能是名称后缀为.txt的文本文件!`)
      }
      const isLt2M = file.size / 1024 / 1024 < 5
      if (!isLt2M) {
        this.$message.error(`上传文件大小不能超过5M!`)
      }
      return isLt2M && isFormat
    },
    /** 上传文件 */
    handleSuccess(file) {
      this.fileList = []
      const nameList = file.context.path.split('/')
      this.fileList.push({
        name: file.context.name || nameList[nameList.length - 1],
        url: file.context.path
      })
      this.addFormData.path = file.context.path
    },
    beforeRemove(files, filesList) {
      return this.$confirm(`确定要移除${files.name}？`)
    },
    /** 弹出包选择框*/
    handlePackOpen() {
      this.packOpen = true
    },
    /** 关闭包选择框*/

    closeAddPack() {
      this.packOpen = false
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  background: #ffffff;
  margin: 24px;
}

.form-main {
  width: 700px;
  margin: 0 auto;
}

::v-deep .el-input.is-disabled .el-input__inner, .el-textarea.is-disabled .el-textarea__inner {
  border: 1px solid #E4E7ED !important;
}

.tag-group {
  .el-tag {
    cursor: pointer;

  }
}

.el-tag + .el-tag {
  margin-left: 10px
}
</style>
