<template>
  <div class="app-container">
    <el-form v-show="showSearch" ref="queryForm" :inline="true" :model="queryParams" label-width="120px" size="small">
      <el-form-item label="APP名称" prop="appName">
        <el-input
          v-model="queryParams.appName"
          clearable
          placeholder="请输入APP名称"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="版本号" prop="version">
        <el-input
          v-model="queryParams.version"
          clearable
          placeholder="请输入版本号"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="有效期开始时间" prop="validityStartTime">
        <el-date-picker v-model="queryParams.validityStartTime"
                        clearable
                        placeholder="请选择有效期开始时间"
                        type="date"
                        value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item label="有效期结束时间" prop="validityEndTime">
        <el-date-picker v-model="queryParams.validityEndTime"
                        clearable
                        placeholder="请选择有效期结束时间"
                        type="date"
                        value-format="yyyy-MM-dd"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button icon="el-icon-search" size="mini" type="primary" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['deployment:publish:add']"
          icon="el-icon-plus"
          plain
          size="mini"
          type="primary"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['deployment:publish:edit']"
          :disabled="single"
          icon="el-icon-edit"
          plain
          size="mini"
          type="success"
          @click="handleUpdate"
        >修改
        </el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          :disabled="multiple"
          icon="el-icon-top"
          plain
          size="mini"
          type="info"
          @click="handleDelete"
        >批量发布
        </el-button>
      </el-col>

      <el-col :span="1.5">
        <el-button
          v-hasPermi="['deployment:publish:remove']"
          :disabled="multiple"
          icon="el-icon-delete"
          plain
          size="mini"
          type="danger"
          @click="handleDelete"
        >批量删除
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="publishList" @selection-change="handleSelectionChange">
      <el-table-column :show-overflow-tooltip="true" align="center" type="selection" width="55"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="APP名称" prop="appName"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="版本号" prop="version"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="系统" prop="systemType"/>
      <el-table-column align="center" label="公开版" prop="publicVersion" width="90">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.publicVersion" :active-value="1" :inactive-value="0" class="drawer-switch"
                     disabled
          />
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" align="center" label="强制更新" prop="forceUpdate" width="90">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.forceUpdate" :active-value="1" :inactive-value="0" class="drawer-switch"
                     disabled
          />
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" align="center" label="上传时间" prop="updateTime" width="120">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column :show-overflow-tooltip="true" align="center" label="发布环境" prop="publishEnvironment"
                       width="180"
      >
        <template slot-scope="scope">
          <div v-for="item in environmentList" :key="item.id">
            <div v-if="item.id===scope.row.publishEnvironment">{{ item.name }}</div>
          </div>
          <!--          <dict-tag :options="environmentList" :value="scope.row.publishEnvironment"/>-->
        </template>
      </el-table-column>

      <el-table-column :show-overflow-tooltip="true" align="center" label="发布状态" prop="publishEnvironment"
                       width="180"
      >
        <template slot-scope="scope">
          <dict-tag :options="dict.type.release_status" :value="scope.row.status"/>
        </template>
      </el-table-column>

      <el-table-column :show-overflow-tooltip="true" align="center" label="安装包编号" prop="apkId"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="版本说明" prop="versionDesc"/>
      <el-table-column :show-overflow-tooltip="true" align="center" label="公开时间" prop="createTime" width="180">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.createTime) }}</span>
        </template>
      </el-table-column>


      <el-table-column
        align="center"
        label="二维码"
        min-width="80"
      >
        <template slot-scope="scope">
          <template v-if="scope.row.quickMark">
            <el-image
              v-if="scope.row.status!=2"
              :preview-src-list="[scope.row.quickMark]"
              :src="scope.row.quickMark"
              style="width: 80px; height: 80px"
            >
            </el-image>

            <el-image
              v-else
              :src="scope.row.quickMark"
              style="width: 80px; height: 80px"
            >
            </el-image>
          </template>

          <div v-else>/</div>
          <!--          <el-popover-->
          <!--              v-if="scope.row.qrCode && scopeC.row.status !== '20'"-->
          <!--              ref="popver"-->
          <!--              trigger="click"-->
          <!--              width="200"-->
          <!--          >-->
          <!--            <div class="table-img">-->
          <!--              <img :src="'data:image/jpg;base64,'+ scope.row.qrCode">-->
          <!--              <p v-if="scopeC.row.verifyCode">密码:{{ scope.row.verifyCode }}</p>-->
          <!--            </div>-->
          <!--          </el-popover>-->
          <!--          <div v-else>-</div>-->
        </template>
      </el-table-column>

      <el-table-column align="center" class-name="small-padding fixed-width" label="操作">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.status===1"
            icon="el-icon-bottom"
            size="mini"
            type="text"
            @click="handleDown(scope.row)"
          >下架
          </el-button>
          <el-button
            v-if="scope.row.status==2 || scope.row.status==0"
            icon="el-icon-top"
            size="mini"
            type="text"
            @click="handlePublish(scope.row)"
          >发布
          </el-button>

          <el-button
            icon="el-icon-view"
            size="mini"
            type="text"
            @click="handleDetail(scope.row)"
          >详情
          </el-button>

          <el-button
            icon="el-icon-download"
            size="mini"
            type="text"
            @click="handleDownload(scope.row)"
          >下载安装包
          </el-button>
          <el-button
            v-if="scope.row.status===2"
            v-hasPermi="['deployment:publish:edit']"
            icon="el-icon-edit"
            size="mini"
            type="text"
            @click="handleUpdate(scope.row)"
          >修改
          </el-button>
          <el-button
            v-if="scope.row.status===2"
            v-hasPermi="['deployment:publish:remove']"
            icon="el-icon-delete"
            size="mini"
            type="text"
            @click="handleDelete(scope.row)"
          >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :limit.sync="queryParams.pageSize"
      :page.sync="queryParams.pageNum"
      :total="total"
      @pagination="getList"
    />

    <!-- 添加或修改发布列表对话框 -->

    <el-dialog :title="title" :visible.sync="open" append-to-body width="900px">
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <el-form-item label="APPid">
          <el-input v-model="form.applyId" placeholder="请输入Appid" readonly/>
        </el-form-item>

        <el-form-item label="APP名称">
          <el-input v-model="form.appName" placeholder="请输入APP名称" readonly/>
        </el-form-item>
        <el-form-item label="选择系统" prop="grayFlag">
          <el-radio-group v-model="form.systemType">
            <el-radio-button label="android">android</el-radio-button>
            <el-radio-button label="IOS">IOS</el-radio-button>
            <el-radio-button label="HarmonyOS">HarmonyOS</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="form.systemType!='IOS'" label="安装包" prop="apkId">
          <el-input v-model="form.apkId" class="input-with-select" placeholder="请选择包" readonly>
            <el-button slot="append" icon="el-icon-search" @click="handlePackOpen"></el-button>
          </el-input>
          <!--          <el-input v-model="form.apkId" placeholder="请输入安装包编号"/>-->
        </el-form-item>
        <el-form-item v-if="form.systemType=='IOS'" label="app store地址" prop="appStoreAddress">
          <el-input v-model="form.appStoreAddress" placeholder="请输入app store地址"/>
        </el-form-item>
        <el-form-item label="版本号" prop="version">
          <el-input v-model="form.version" placeholder="请输入版本号"/>
        </el-form-item>
        <el-form-item label="版本说明" prop="versionDesc">
          <el-input v-model="form.versionDesc" placeholder="请输入版本说明"/>
        </el-form-item>
        <el-form-item label="发布环境" prop="publishEnvironment">

          <el-select v-model="form.publishEnvironment">
            <el-option
              v-for="dict in environmentList"
              :key="dict.value"
              :label="dict.name"
              :value="parseInt(dict.id)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发布策略" prop="publishStrategy">

          <el-select v-model="form.publishStrategy">
            <el-option
              v-for="dict in dict.type.release_strategy"
              :key="dict.value"
              :label="dict.label"
              :value="parseInt(dict.value)"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="结果通知" prop="resultNotify">
          <el-switch
            v-model="form.resultNotify"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="公开版" prop="publicVersion">

          <el-switch
            v-model="form.publicVersion"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="强制更新" prop="forceUpdate">
          <el-switch
            v-model="form.forceUpdate"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <el-form-item label="下载验证" prop="downloadVerification">
          <el-switch
            v-model="form.downloadVerification"
            :active-value="1"
            :inactive-value="0"
          />
        </el-form-item>
        <!--        <el-form-item label="更新对象(-1: 不限制, 白名单id)" prop="updateObject">-->
        <!--        <el-form-item label="更新对象" prop="updateObject">-->

        <!--          <el-select v-model="form.publishStrategy">-->
        <!--            <el-option-->
        <!--                v-for="dict in dict.type.release_user_type"-->
        <!--                :key="dict.value"-->
        <!--                :label="dict.label"-->
        <!--                :value="parseInt(dict.value)"-->
        <!--            />-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <el-form-item label="有效期开始时间" prop="validityStartTime">
          <el-date-picker v-model="form.validityStartTime"
                          clearable
                          placeholder="请选择有效期开始时间"
                          type="date"
                          value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="有效期结束时间" prop="validityEndTime">
          <el-date-picker v-model="form.validityEndTime"
                          clearable
                          placeholder="请选择有效期结束时间"
                          type="date"
                          value-format="yyyy-MM-dd"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="form.remark" placeholder="请输入备注"/>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="pubLishForm">发 布</el-button>

        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>


    <AddPack v-if="packOpen" @addPack="addPack" @close="closeAddPack"></AddPack>
    <DetailModal v-if="openDetail" :detailId="detailId" :openDetail="openDetail" @close="closeDetailModal"
    ></DetailModal>
  </div>
</template>

<script>
import {
  addPublish,
  delPublish,
  getPublish,
  listPublish,
  publish,
  soldPublish,
  updatePublish
} from '@/api/deployment/publish'
import Cookies from 'js-cookie'
import AddPack from '@/views/FDS/publishList/components/addPack.vue'
import DetailModal from './component/detail.vue'
import { listEnvironment } from '@/api/deployment/environment'
import { getApplicationName } from '@/utils/application'

export default {
  name: 'Publish',
  dicts: ['release_environment', 'sys_yes_no', 'release_strategy', 'release_user_type', 'release_status'],
  components: {
    AddPack,
    DetailModal
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 发布列表表格数据
      publishList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      packOpen: false,
      openDetail: false,
      detailId: '',
      environmentList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        appName: null,
        version: null,
        validityStartTime: null,
        validityEndTime: null
      },
      queryParamsEnvironment: {
        pageNum: 1,
        pageSize: 999
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        appName: [
          { required: true, message: '应用name不能为空', trigger: 'blur' }
        ],
        systemType: [
          { required: true, message: '系统类型不能为空', trigger: 'change' }
        ],
        apkId: [
          { required: true, message: '安装包编号不能为空', trigger: 'blur' }
        ],
        version: [
          { required: true, message: '版本号不能为空', trigger: 'blur' }
        ],
        publishEnvironment: [
          { required: true, message: '发布环境不能为空', trigger: 'change' }
        ],
        publishStrategy: [
          { required: true, message: '发布策略不能为空', trigger: 'change' }
        ],
        publicVersion: [
          { required: true, message: '公开版不能为空', trigger: 'change' }
        ],
        forceUpdate: [
          { required: true, message: '强制更新不能为空', trigger: 'change' }
        ],
        updateObject: [
          { required: true, message: '更新对象(-1: 不限制, 白名单id)不能为空', trigger: 'change' }
        ],
        status: [
          { required: true, message: '0:保存,1:已发布,2:已下架不能为空', trigger: 'change' }
        ],
        isDelete: [
          { required: true, message: '逻辑删除,0:未删除,1:删除不能为空', trigger: 'blur' }
        ],
        createTime: [
          { required: true, message: '创建时间不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getList()
    this.getEnvironmentList()
  },
  methods: {
    /** 查询发布列表列表 */
    getList() {
      this.loading = true
      listPublish(this.queryParams).then(response => {
        this.publishList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.loading = false
      this.reset()

    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        applyId: Cookies.get('Admin-Application-Id'),
        appName: getApplicationName(),
        systemType: null,
        apkId: null,
        appStoreAddress: null,
        version: null,
        versionDesc: null,
        publishEnvironment: null,
        publishStrategy: null,
        resultNotify: null,
        publicVersion: null,
        forceUpdate: null,
        downloadVerification: null,
        updateObject: null,
        validityStartTime: null,
        validityEndTime: null,
        remark: null,
        status: null,
        isDelete: null,
        created: null,
        modified: null,
        createTime: null,
        updateTime: null
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.open = true
      this.title = '添加发布列表'
      this.getEnvironmentList()
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      this.getEnvironmentList()
      const id = row.id || this.ids
      getPublish(id).then(response => {
        this.form = response.data
        this.open = true
        this.title = '修改发布列表'
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            let data = Object.assign({}, this.form)
            delete data.explain
            updatePublish(data).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.loading = false
              this.open = false
              this.getList()
            })
          } else {
            addPublish(this.form).then(response => {
              this.$modal.msgSuccess('新增成功')
              this.loading = false
              this.open = false
              this.getList()
            })
          }
        }
      })
    },

    // 发布按钮

    pubLishForm() {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            let data = Object.assign({}, this.form)
            delete data.explain
            updatePublish(data).then(response => {
              this.$modal.msgSuccess('修改成功')
              this.loading = false
              this.open = false
              this.handlePublish(data.id)
              // this.getList()
            })
          } else {
            addPublish(this.form).then((res) => {
              this.$modal.msgSuccess('新增成功')
              this.loading = false
              this.open = false
              this.handlePublish(res.id)
              // this.getList()
            })
          }
        }
      })
    },

    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids
      this.$modal.confirm('是否确认删除发布列表编号为"' + ids + '"的数据项？').then(function() {
        return delPublish(ids)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess('删除成功')
      }).catch(() => {
      })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('deployment/publish/export', {
        ...this.queryParams
      }, `publish_${new Date().getTime()}.xlsx`)
    },
    /** 弹出包选择框*/
    handlePackOpen() {
      this.packOpen = true
    },

    addPack(e) {
      this.form.apkId = e.apkId
      this.form.version = e.version
      this.form.systemType = e.sysType
      this.packOpen = false
    },

    /** 关闭包选择框*/

    closeAddPack() {

      this.packOpen = false
    },

    /** 查询环境维护列表 */
    getEnvironmentList() {
      listEnvironment(this.queryParamsEnvironment).then(response => {
        this.environmentList = response.rows
      })
    },

    //   选择系统做一些逻辑判断
    changeSys(sysType) {
      this.form.systemType = sysType
    },
    /**下载安装包*/
    handleDownload() {

    },
    /**下架*/
    handleDown(row) {
      soldPublish(row.id).then(response => {
        this.getList()
      })
    },
    /**发布*/
    handlePublish(row) {
      publish(row.id).then(response => {
        this.getList()
      })
    },
    /**详情*/
    handleDetail(row) {
      this.detailId = row.id
      this.openDetail = true
    },
    closeDetailModal() {
      this.openDetail = false
    }
  }
}
</script>
<style lang="scss" scoped>
.tag-group {
  .el-tag {
    cursor: pointer;

  }
}

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