<template>
	<div class="app-container">
		<el-card class="app-container__list">
			<div class="app-container__list-table">
				<xd-table
					is-border
					:get-link="getLink"
					:headers="headers"
					:list="tables"
					:custom-function="handleCustomFunction"
					@onClick="handleBtnClick"
				>
					<template slot="status" slot-scope="scope">
						<el-tag type="primary" v-if="scope.row.status === 'P'">进行中</el-tag>
						<el-tag type="success" v-else-if="scope.row.status === 'S'">成功</el-tag>
						<el-tag type="danger" v-else-if="scope.row.status === 'T'">已停止</el-tag>
						<el-tag type="danger" v-else-if="scope.row.status === 'E'">错误</el-tag>
						<el-tag type="info" v-else-if="scope.row.status === 'D'">未开始</el-tag>
					</template>
				</xd-table>
			</div>
			<div class="app-container__list-pagination">
				<xd-pagination
					:total="total"
					:limit.sync="limit"
					:page="pageSize"
					:auto-scroll="false"
					@onPagination="handlePagination"
				></xd-pagination>
			</div>
		</el-card>
	</div>
</template>

<script>
  import XdPagination from "@/components/XdPagination.vue";
  import XdTable from "@/components/XdTable";
  import XdSearch from "@/components/XdSearch";
  import {Loading} from 'element-ui';
  import checkPermission from "@/utils/permission";
  import tasks from "@/constant/modules/tasks";
  import {
    mapActions,
    mapState,
  } from 'vuex';
  import {
		getTableHeaders,
  } from "./tasks";

  export default {
    name: "PageTasksList",
    components: {
      XdPagination, //翻译插件
      XdTable,
      XdSearch
    },
    data() {
      return {
				
        //搜索
        searchForm: [], //搜索区域模块表单
        searchParams: null, //搜索参数

        //分页参数
        pageSize: 1, //当前页面数量
        limit: 20, //搜索参数
        total: 200,

        //列表对象
        tables: [],
        headers: [],
      }
    },
		created(){
      this.headers = getTableHeaders();
      this.getList();
      
		},
		methods:{
      ...mapActions('users', [
        'usersAdminInfo', 'usersSetting', 'usersList', 'usersAdminAdd', 'usersAdminEdit',
      ]),
			
			/**
			 * @description 判断按钮是否显示
			 * @param action {String} 操作动作
			 * @param data {Object} 数据参数
			 */
      handleCustomFunction({action, data}){
				if(action === 'btn') {
				  //显示停止按钮
				  if(data.row.status === 'P' && data.btn.name === '停止') {
				    return true
					}
          //显示下载按钮
          if (data.row.status === 'S' && data.row.isDownLoad && data.btn.name === '下载') {
            return true
          }
					
          //显示重新执行按钮
          if (data.row.status === 'E' && data.row.isReload && data.btn.name === '重新执行') {
            return true
          }
				  
          return  false
				}
			},

			
			/**
			 * @description 点击按钮操作
			 * @param value {Object}  按钮对象
			 * @param row {Object}  行对象
       */
      handleBtnClick({value, row}){
        if(value.name === '编辑') {
          this.$router.push({
            path: '/classified/edit/1'
          })
				}
			},
			
      /**
       * @description 获取数据列表
       */
      getList() {

        //请求数据
        let params = {
          ...this.searchParams,
          page: this.pageSize,
          limit: this.limit
        };
        let loading = Loading.service({});

        //正式数据需要自己实现

        //todo

        //测试数据（接完接口之后需要删除）
        setTimeout(() => {
          this.tables = [
            {
              "id": "10001",
              "name": "三和化共低内员工自及先指更以",
              "type": "参数",
              "category": "不检索",
              "brand": "单选",
              "status": 'S',
              "error": "允许",
              "total": 300,
              "operater": "口住支",
              "image": 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200710/6e6e8d3be52ec622216e667620ee9634.jpg',
              "created": "1988-03-22 12:43:56",
              "updated": "1988-03-22 12:43:56",
              "ended": "1988-03-22 12:43:56",
							"isDownLoad": true,
            }, {
              "id": "10002",
              "name": "公里边头报等装料毛式应导党",
              "type": "参数",
              "category": "不检索",
              "brand": "单选",
              "status": 'P',
              "error": "禁止",
              "total": 2,
              "is_required": true,
              "operater": "住支",
              "image": 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200710/6e6e8d3be52ec622216e667620ee9634.jpg',
              "created": "1988-03-22 12:43:56",
              "updated": "1988-03-22 12:43:56",
              "ended": "1988-03-22 12:43:56",
              "isDownLoad": true,
							
            }, {
              "id": "10003",
              "name": "议压张整口住支可动通家回",
              "type": "规格",
              "category": "检索",
              "brand": "多选",
              "status": 'E',
              "error": "禁止",
              "total": 3,
              "is_required": false,
              "operater": "张整口",
              "image": 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200710/6e6e8d3be52ec622216e667620ee9634.jpg',
              "created": "1988-03-22 12:43:56",
              "updated": "1988-03-22 12:43:56",
              "ended": "1988-03-22 12:43:56",
              "isReload": true,
            }, {
              "id": "10004",
              "name": "张整口住支",
              "type": "参数",
              "category": "不检索",
              "brand": "单选",
              "status": 'T',
              "error": "允许",
              "total": 4,
              "operater": "毛式应",
              "image": 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200710/6e6e8d3be52ec622216e667620ee9634.jpg',
              "created": "1988-03-22 12:43:56",
              "updated": "1988-03-22 12:43:56",
              "ended": "1988-03-22 12:43:56",
              "isReload": true,
            },
            {
              "id": "10004",
              "name": "张整口住支",
              "type": "参数",
              "category": "不检索",
              "brand": "单选",
              "status": 'D',
              "error": "允许",
              "total": 4,
              "operater": "毛式应",
              "image": 'https://jfbcake.oss-cn-beijing.aliyuncs.com/uploads/20200710/6e6e8d3be52ec622216e667620ee9634.jpg',
              "created": "1988-03-22 12:43:56",
              "updated": "1988-03-22 12:43:56",
              "ended": "1988-03-22 12:43:56",
              "isReload": true,
            }
          ];
          loading.close()
        }, 500);
      },
      /**
       * @description 预设获取页面跳转地址方法（次场景可以不实现）
       * @param item
       */
      getLink(item) {
        return '/'
      },
			
      /**
       * @description 翻页处理方法
       * @param page {Number} 访问页面页码数
       */
      handlePagination(page) {
        this.pageSize = page;
        this.getList();
      },
		}
  }
</script>

<style scoped>

</style>
