<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 slot-scope="scope">
          <span>{{scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column  align="center" label="标识名称">
        <template slot-scope="scope">
          <span>{{scope.row.markName}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="标识">
        <template slot-scope="scope">
          <span> {{scope.row.mark}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="来源类型">
        <template slot-scope="scope">
          <span> {{scope.row.sourceType==1?'苹果应用市场':scope.row.sourceType==2?'Android应用市场':scope.row.sourceType==3?'广告投放':scope.row.sourceType==4?'SEO':scope.row.sourceType==5?'产品功能引流':scope.row.sourceType==6?'小程序':''}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="描述">
        <template slot-scope="scope">
          <span>{{scope.row.markRemark}}</span>
        </template>
      </el-table-column>
      <el-table-column  align="center" label="创建时间">
        <template slot-scope="scope">
          <span>{{scope.row.crtTime}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="130" fixed="right">
        <template slot-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="form" label-width="150px" :rules="rules">
          <el-row>
            <el-col :span="12">
              <el-form-item label="来源类型" prop="sourceType">
                <el-select class="filter-item" v-model="form.sourceType" placeholder="请选择来源类型">
                  <el-option v-for="(val,index) in sourceTypeList " :key="index" :label="val.name" :value="val.id"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="标识ID" prop="mark">
                <el-input type="text" v-model="form.mark" placeholder="请输入标识ID"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="标识名称" prop="markName">
                <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="标识描述">
                <el-input type="textarea" v-model="form.markRemark" :rows=5 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('form')">确 定</el-button>
          <el-button type="primary" v-else @click="updateAppVersion('form')">确 定</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: [],
        sourceTypeList: [{id: 1, name: "苹果应用市场"}, {id: 2, name: "Android应用市场"}, {id: 3, name:"广告投放"}, {id: 4, name: "SEO"}, {id: 5, name:"产品功能引流"}, {id: 6,name:"小程序"}],
        multipleb: false,
        BASE_API: process.env.BASE_API,
        form: {
          id: undefined,
          markRemark: '',
          markName: '',
          mark:'',
          sourceType: undefined
        },
        rules: {
          sourceType: {
            type: 'number',
            required: true,
            message: '请选择来源类型',
            trigger: 'blur'
          },
          mark: {
            type: 'string',
            required: true,
            message: '请输入标识ID',
          },
          markName: {
            type: 'string',
            required: true,
            message: '请输入标识名称'
          },
        },
        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;
        this.form.sourceType = parseInt(row.sourceType);
      },
      /**
       * 点击 X 关闭对话框的回调
       **/
      handleDialogClose() {
        this.template();
        this.versionPopup = false;
      },
      /**
       *  取消保存
       */
      cancelSetAppVersion() {
        this.template();
        this.versionPopup = false;
      },
      /**
       *  添加
       */
      insertAppVersion(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            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: res.message,
                  type: 'error',
                  duration: 2000
                });
              }
              this.versionPopup = false;
            })
          }
        });
      },
      /**
       * 编辑、删除
       */
      updateAppVersion(formName) {
        const set = this.$refs;
        set[formName].validate(valid => {
          if (valid) {
            let params = {
              id: this.form.id,
              mark: this.form.mark,
              markName: this.form.markName,
              markRemark: this.form.markRemark,
              changeMark: 1,//1：修改2：删除
              sourceType: this.form.sourceType
            };
            appMarkVersionUpdate( params ).then(res=>{
              if (res.status === 200) {
                this.$notify({
                  title: '成功',
                  message: '修改成功',
                  type: 'success',
                  duration: 2000
                });
                this.getList();
              } else {
                this.$notify({
                  title: '失败',
                  message: res.message,
                  type: 'error',
                  duration: 2000
                });
              }
              this.versionPopup = false
            })
          }
        })
      },
      /**
       * 删除标识
       * @param row
       */
      deleteApp(row){
        this.$confirm('确定删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          let params = {
            changeMark: 2,//1：修改2：删除
            id: row.id,
            mark: row.mark,
            markName: row.markName,
            markRemark: row.markRemark,
            sourceType: row.sourceType
          };
          appMarkVersionUpdate(params).then(res=>{
            if (res.status==200) {
              this.$notify.success({
                title: '成功',
                type: 'success',
                message: `删除成功`
              })
            } else {
              this.$notify({
                title: '失败',
                message: res.message,
                type: 'error',
                duration: 2000
              });
            }
            this.getList();
          })
        })
      },
      template() {
        this.form = {
          id: undefined,
          mark: undefined,
          markRemark: '',
          markName: '',
          sourceType: undefined
        };
      }
    }
  }


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