<template>
  <div class="app-container calendar-list-container">
    <div class="filter-container">
      <el-button class="filter-item" style="margin-bottom: 10px;" @click="handleCreate"
                 type="primary" icon="edit">新增
      </el-button>
    </div>
    <el-table :key='tableKey' :data="list" v-loading.body="listLoading" border fit highlight-current-row
              style="width: 100%">
      <el-table-column align="center" label="序号">
        <template scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column  align="center" label="标识名称">
        <template scope="scope">
          <span>{{scope.row.markName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标识">
        <template scope="scope">
          <span> {{scope.row.mark}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="描述">
        <template scope="scope">
          <span>{{scope.row.markRemark}}</span>
        </template>
      </el-table-column>
      <el-table-column  align="center" label="创建时间">
        <template scope="scope">
          <span>{{scope.row.crtTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="130" fixed="right">
        <template scope="scope">
          <el-button size="small" class="el-button el-button--text el-button--small" @click="compileAppUpload(scope.row)">编辑
          </el-button>
          <el-button class="el-button el-button--text el-button--small" style="color:red" size="small" @click="deleteApp(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div v-show="!listLoading" class="pagination-container">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page.sync="query.page" :page-sizes="[10,20,30, 50]" :page-size="query.limit"
                     layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
    </div>
    <el-dialog :title="modalTitle" :visible.sync="versionPopup" :before-close="handleDialogClose">
        <el-form :model="form" ref="appVersion" label-width="150px">
          <el-row>
            <el-col :span="12">
              <el-form-item label="标识名称" prop="sysType">
                <el-input type="text" v-model="form.markName" placeholder="请输入标识名称"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="标识描述" prop="version">
                <el-input type="textarea" v-model="form.markRemark" :rows=5 placeholder="请输入标识描述"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row v-if="modalTitle=='编辑'">
            <el-col :span="12">
              <el-form-item label="标识" prop="version">
                <el-input type="text" v-model="form.mark" disabled placeholder="请输入标识描述"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelSetAppVersion()">取消</el-button>
          <el-button type="primary" v-if="modalTitle=='创建'" @click="insertAppVersion()">确 定</el-button>
          <el-button type="primary" v-else @click="updateAppVersion()">确 定</el-button>
        </div>
      </el-dialog>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex';
  import {getToken} from 'src/utils/auth';
  import {
    getMarkList,
    appMarkVersionAdd,
    appMarkVersionUpdate
  } from 'src/api/appManagement/version'
  import {timestamp2Date} from 'src/utils/dateUtils';

  export default {
    name: 'appUpload',
    components: {
    },
    data() {
      return {
        fileList: [],
        multipleb: false,
        BASE_API: process.env.BASE_API,
        form: {
          id: undefined,
          markRemark: '',
          markName: '',
          mark:''
        },
        versionPopup: false,
        modalTitle: '创建',
        list: [],
        listLoading: true,
        tableKey: 0,
        query: {
          limit: 10,
          page: 1,
          mark: undefined
        },
        total: null,
      }
    },
    created() {
      this.getList();
    }
    ,
    computed: {
      ...
        mapGetters([
          'elements'
        ]),
      /**
       * 获取token
       */
      getHeaderWithToken() {
        return {Authorization: getToken()};
      },
    },
    methods: {
      /**
       * 新增
       * */
      handleCreate() {
        this.template();
        this.modalTitle = '创建';
        this.versionPopup = true;
      },
      /**
       * 获取 标识列表
       * */
      getList() {
        getMarkList(this.query).then(
          res => {
            this.traverse(res.data.list);
            this.list = res.data.list;
            this.total = res.data.total;
            this.listLoading = false;
          }
        )
      },
      traverse(list) {
        for (let key of list) {
          key.crtTime = key.crtTime ? timestamp2Date(key.crtTime) : null
        }
      },
      handleSizeChange(val) {
        this.query.limit = val;
        this.getList();
      }
      ,
      handleCurrentChange(val) {
        this.query.page = val;
        this.getList();
      },
      handleFilter() {
        this.getList()
      },
      /**
       *  编辑窗口
       */
      compileAppUpload(row) {
        this.template();
        this.modalTitle = '编辑';
        this.versionPopup = true;
        this.form.markName = row.markName;
        this.form.markRemark = row.markRemark;
        this.form.id = row.id;
        this.form.mark = row.mark;
      },
      /**
       * 点击 X 关闭对话框的回调
       **/
      handleDialogClose() {
        this.template();
        this.versionPopup = false;
      },
      /**
       *  取消保存
       */
      cancelSetAppVersion() {
        this.template();
        this.versionPopup = false;
      },
      /**
       *  添加
       */
      insertAppVersion() {
        appMarkVersionAdd(this.form).then(res => {
          if (res.status === 200) {
            this.$notify({
              title: '成功',
              message: '添加成功',
              type: 'success',
              duration: 2000
            });
            this.template();
            this.getList();
          } else {
            this.$notify({
              title: '失败',
              message: '添加失败！',
              type: 'error',
              duration: 2000
            });
          }
          this.versionPopup = false;
        })
      },
      /**
       * 编辑、删除
       */
      updateAppVersion() {
        let params = {
          id: this.form.id,
          markName: this.form.markName,
          markRemark: this.form.markRemark,
          changeMark: 1,//1：修改2：删除
        };
        appMarkVersionUpdate( params ).then(res=>{
          if (res.status === 200) {
            this.$notify({
              title: '成功',
              message: '修改成功',
              type: 'success',
              duration: 2000
            });
            this.getList();
          } else {
            this.$notify({
              title: '失败',
              message: '修改失败！',
              type: 'error',
              duration: 2000
            });
          }
          this.versionPopup = false
        })
      },
      /**
       * 删除标识
       * @param row
       */
      deleteApp(row){
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            id: row.id,
            markName: row.markName,
            markRemark: row.markRemark,
            changeMark: 2,//1：修改2：删除
          };
          appMarkVersionUpdate(params).then(res=>{
            if (res.status==200) {
              this.$notify.success({
                title: '删除成功',
                message: `success`
              })
            } else {
              this.$notify.warning({
                title: '删除失败',
                message: `failed`
              })
            }
            this.getList();
          })
        })
      },
      template() {
        this.form = {
          id: undefined,
          mark: undefined,
          markRemark: '',
          markName: '',
        };
      }
    }
  }


</script>
<style>
  .v-modal{
    z-index: 1000 !important;
  }
  .el-dialog__wrapper{
    z-index: 1008 !important;
  }
</style>
