<template>
  <el-dialog title="系统发布日志" :visible.sync="dialogFormVisible" width="1120px" min-height="600px"
    :close-on-click-modal="false" :modal="true" :append-to-body="true">
    <div>
      <el-form v-show="showSearch" ref="queryForm" :model="queryParams" :inline="true" label-width="68px">

        <el-form-item prop="sysName">
          <el-select v-model="queryParams.sysName" placeholder="请选择更新系统" clearable size="small">
            <el-option v-for="dict in jobGroupOptions" :key="dict.dictValue" :label="dict.dictLabel"
              :value="dict.dictValue" />
          </el-select>
        </el-form-item>
        <!-- <el-form-item prop="status">
            <el-select v-model="queryParams.status" placeholder="请选择任务状态" style="width: 150px;" clearable size="small">
              <el-option v-for="dict in statusOptions" :key="dict.dictValue" :label="dict.dictLabel"
                :value="dict.dictValue" />
            </el-select>
          </el-form-item> -->
        <el-form-item>
          <el-button type="primary" size="small" @click="handleQuery">查询</el-button>
          <el-button size="small" class="btn-reset" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-row :gutter="10" style="float: right;">
        <el-col :span="1.5">
          <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
        </el-col>
        <!-- <el-col :span="1.5">
          <el-button size="mini" :disabled="single" @click="handleUpdate">修改</el-button>
        </el-col> 
        <el-col :span="1.5">
          <el-button size="mini" @click="handleDelete">批量删除</el-button>
        </el-col>-->
      </el-row>
    </div>
    <div>
      <el-table v-loading="loading" :data="jobList" height="360">
        <!-- <el-table-column type="selection" width="55" align="center" /> -->
        <el-table-column label="系统名称" align="left" header-align="center" prop="sysName" :show-overflow-tooltip="true"
          width="180" />
        <el-table-column label="系统版本" align="center" prop="sysVersion" width="100" />
        <el-table-column label="发布类别" align="center" prop="sysType" width="100" />
        <el-table-column label="发布内容" align="center" prop="versionDesc" :show-overflow-tooltip="true" />
        <el-table-column label="发布时间" align="center" prop="versionTime" :show-overflow-tooltip="true" />
        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-tag :type="scope.row.deleted ? 'warning' : 'info'">{{
    scope.row.status == 0 ? '已发布' : (scope.row.status == 1 ? '开发中' : '取消') }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="联系人" align="center" prop="contactName"  width="100"/>
        <el-table-column label="操作" align="center" width="120">
          <template slot-scope="scope"> 
          <el-button  type="text" size="mini" icon="el-icon-edit" @click="handleUpdate(scope.row)">编辑</el-button>
          <el-button  type="text" size="mini" style="color:red" icon="el-icon-close" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total > 0" :total="total * 1" :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
    <!-- 添加或修改定时任务对话框 -->
    <el-dialog class="foot-button-reverse-dialog-wrapper" :title="title" :visible.sync="open" width="760px"
      append-to-body :close-on-click-modal="false">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="系统名称" prop="sysName">
              <el-select v-model="form.sysName" :disabled="form.id" placeholder="请选择系统" style="width: 100%;">
                <el-option v-for="dict in jobGroupOptions" :key="dict.dictValue" :label="dict.dictLabel"
                  :value="dict.dictValue" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="版本"  prop="sysVersion">
              <el-input v-model="form.sysVersion" placeholder="请输入系统版本"  :disabled="form.id"/>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="发布类型">
              <el-radio-group v-model="form.sysType"  :disabled="form.id">
                <el-radio v-for="dict in typeOptions" :key="dict.dictValue"
                  :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="发布内容" prop="versionDesc">
              <el-input v-model="form.versionDesc" type="textarea"  :disabled="form.id" :rows="5" placeholder="请输入本次更新内容 多条请换行" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发布时间" prop="versionTime">
              <el-date-picker v-model="form.versionTime" size="small" value-format="yyyy-MM-dd HH:mm:ss" :disabled="form.id" type="datetime" style="width: 240px"
                placeholder="请选择发布时间" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="开发负责人" prop="contactName">
              <el-input v-model="form.contactName" placeholder="请输入开发负责人"  :disabled="form.id" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="手册地址" prop="manualUrl">
              <el-input v-model="form.manualUrl" placeholder="请输入使用手册的url地址" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态">
              <el-radio-group v-model="form.status">
                <el-radio v-for="dict in statusOptions" :key="dict.dictValue"
                  :label="dict.dictValue">{{ dict.dictLabel }}</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>

        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" button-type="submit">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </el-dialog>

</template>

<script>
import { listVersion, getVersion, delVersion, addVersion, updateVersion } from '@/api/version';
import pagination from '@/components/Pagination'

export default {
  name: 'version',
  components: {
    pagination
  },
  data() {
    return {
      dialogFormVisible: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 定时任务表格数据
      jobList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 是否显示详细弹出层
      openView: false,
      // 任务组名字典
      jobGroupOptions: [
        { dictValue: '商城系统', dictLabel: '商城系统' },
        { dictValue: '加盟商系统', dictLabel: '加盟商系统' },
        { dictValue: '客户CRM', dictLabel: '客户CRM' },
        { dictValue: '服务者CRM', dictLabel: '服务者CRM' },
        { dictValue: '报表系统', dictLabel: '报表系统' },
      ],
      // 发布类型
      typeOptions: [
        { dictValue: '新增功能', dictLabel: '新增功能' },
        { dictValue: '迭代升级', dictLabel: '迭代升级' },
        { dictValue: 'Bug修复', dictLabel: 'Bug修复' },
        { dictValue: '首页公告', dictLabel: '首页公告' },
      ]
      ,
      // 状态字典
      statusOptions: [
        { dictValue: 0, dictLabel: '已发布' },
        { dictValue: 1, dictLabel: '开发中' },
        { dictValue: 2, dictLabel: '取消' },
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 20,
        sysName: '',
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        sysName: [{ required: true, message: '系统名称不能为空', trigger: 'change' }],
        versionDesc: [{ required: true, message: '更新内容不能为空', trigger: 'blur' }],
        versionTime: [{ required: true, message: '发布时间不能为空', trigger: 'blur' }],
        sysVersion: [{ required: true, message: '发布版本不能为空', trigger: 'blur' }],
        status: [{ required: true, message: '发布状态不能为空', trigger: 'change' }],
      }
    };
  },
  created() {
  },
  methods: {
    showForm() {
      this.dialogFormVisible = true;
      //console.info(this.$store.state.user.name);
      if (this.jobList.length == 0)
        this.getList();
    },
    /** 查询定时任务列表 */
    getList() {
      this.loading = true;
      listVersion(this.queryParams).then((response) => {
        this.jobList = response.data.data.list;
        this.total = response.data.data.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        sysName: undefined,
        sysType: '新增功能',
        sysVerison: undefined,
        versionDesc: undefined,
        versionTime: '',
        status: 0
      };
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm');
      this.handleQuery();
    }, 
    /** 任务详细信息 */
    handleView(row) {
      getJob(row.jobId).then((response) => {
        this.form = response.data.data;
        this.openView = true;
      });
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = '添加新发布日志';
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset(); 
      const id = row.id || this.ids;
      console.info(id)
      getVersion(id).then((response) => {
        this.form = response.data.data;
        this.open = true;
        this.title = '修改发布日志';
      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id !== undefined) {
            updateVersion(this.form).then((response) => {
              this.msgSuccess('修改成功');
              this.open = false;
              this.getList();
            });
          } else {
            addVersion(this.form).then((response) => {
              this.msgSuccess('新增成功');
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) { 
      const jobIds = row.id || this.ids;
      this.confirmModal(
        {
          msg: '是否确认删除更新日志编号为"' + jobIds + '"的数据项?'
        },
        () => {
          return delVersion(jobIds)
            .then(() => {
              this.getList();
              this.msgSuccess('删除成功');
            })
            .catch(function () { });
        }
      );
    },
  }
};
</script>