<template>

    <div class="selectTemplate">
      <Row>
        <Col span="24">
          <Tips :title="title"></Tips>
        </Col>
      </Row>
      <Row >
        <Col span="24">
          <div class="c-query">
            <Form inline ref="formInline"  :model="formInline" >
              <FormItem label="事项名称：" prop="name" >
                <Input type="text" v-model="formInline.itemName" @keyup.enter.native="searchTableData"  clearable placeholder="请输入事项名称"/>
              </FormItem>
              <FormItem>
                <Button type="primary" @click="searchTableData()">查询</Button>
                <Button type="primary" @click="reset" >重置</Button>
              </FormItem>
            </Form>
          </div>
        </Col>
      </Row>
      <!--  <Form ref="formInline" :model="formInline" :rules="ruleInline" inline style="margin-top: 20px;">
            <FormItem prop="name" >
                <label>请输入模板名称
                </label>
                <Input type="text" v-model="formInline.itemName" @keyup.enter.native="searchTableData" placeholder="请输入模板名称">
                </Input>
            </FormItem>
            <FormItem>
                <Button type="primary" @click="searchTableData()">搜索</Button>
            </FormItem>
        </Form>-->

      <Row style="text-align: right; margin-top: 20px;">
        <Col span="24" >
          <Table border :columns="columns5" :data="getTableArr"></Table>
          <Page :current=currentPage :total=total  @on-change="pagechange" style="background: none"/>
        </Col>
      </Row>
      <Modal
              v-model="isDel"
              title="是否清空"
              @on-ok="ok"
              @on-cancel="cancel">
        <p>点击确定将会让会清空所有已创建的事项步骤，</p>

      </Modal>

    </div>
</template>

<script>
    /**
     *@author       叶章浩
     *@date         2018/11/26 19:22
     *@Copyright    天源迪科信息技术股份有限公司
     *@Description
     */
    import Service from "../../service/pageIde/tool-service";
    import Tips from '../../components/tips';
    export default {
        name: "selectTemplate",
      components: {Tips},
        data () {
            return {
                isDel:false,
                myRow:[],
                title:"事项查询",
                currentPage:1,
                total:0,
                pageSize:10,
                optionsData:[],
                formInline: {
                    step:'',
                    date:'',
                    itemName: ''
                },
                ruleInline: {

                },
                columns5: [
                    {
                        type: 'index2',
                        width: 100,
                        title: '序号',
                        align: 'center',
                        render: (h, params) => {
                            console.log("params.index："+params.index);
                            console.log("this.currentPage："+this.currentPage);
                            console.log("this.pageSize："+this.pageSize);
                            return h('span', params.index + (this.currentPage- 1) * this.pageSize + 1);
                        }
                    },
                    {
                        title: '事项名称',
                        align: 'center',
                        key: 'itemName'
                    },
                    {
                        title: '事项第几步',
                        key: 'itemStep',
                        align: 'center',
                        sortable: true
                    },
                    {
                        title: '标题',
                        key: 'itemTitle',
                        align: 'center',
                        sortable: true
                    },
                    {
                        title: '状态',
                        key: 'status',
                        align: 'center',
                        sortable: true,
                        render: (h, params) => {
                            if(params.row.status=="1"){
                                //note 已创建
                                return h('Div', {
                                },"已创建");
                            }else{
                                return h('Div', {
                                },"未创建");
                            }
                        }
                    },
                   /* {
                        title: '创建日期',
                        key: 'date',
                        align: 'center',
                        sortable: true
                    },*/
                    {
                        title: '操作',
                        key: 'operate',
                        align: 'center',
                        sortable: true,
                        render: (h, params) => {
                            console.log("params.index："+params.index);
                            console.log("this.currentPage："+this.currentPage);
                            console.log("this.pageSize："+this.pageSize);
                            if(params.row.status=="1"){
                                //note 已创建
                                return h('div', [
                                    h('Button', {
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.showTemplate(params.row);
                                               // this.showTemplate(params.row.itemNo,params.row.itemStep,params.row.status,params.row.itemMaxStep,params.row.itemTitle)
                                            }
                                        }
                                    },"编辑"),
                                    h('Button', {
                                        on: {
                                            click: () => {
                                                this.isDel=true;
                                                this.myRow=params.row;

                                              //  this.deleteTemplate(params.row.itemNo,params.row.itemStep,params.row.status)
                                            }
                                        }
                                    },"清空")
                                ]);
                            }else{
                                return h('Button', {
                                    on: {
                                        click: () => {
                                            this.showTemplate(params.row);
                                            // this.showTemplate(params.row.itemNo,params.row.itemStep,params.row.status,params.row.itemMaxStep,params.row.itemTitle)
                                        }
                                    }
                                },"创建");
                            }

                        }
                    }
                ],
                data5: [
                ]
            }
        },//
        computed: {

            getTableArr(){
                return this.data5;
            }
        },
        methods: {
            ok () {
                debugger;
                this.deleteTemplate(this.myRow);
            },
            cancel () {
            },
            //note 清空缓存
            delLocalCache(){
                //note 进入工具页面之前，清空缓存
                localStorage.removeItem('tableProp');
                localStorage.removeItem('tableArr');
                localStorage.removeItem('tableArr');
                localStorage.removeItem('selectArr');
                localStorage.removeItem('targetData');
                localStorage.removeItem('formInline');
                localStorage.removeItem('cacheListener');
                localStorage.removeItem('page');
            },
            //note 清空模板、
            deleteTemplate(rowItem){
                let params = {
                 //   itemStep: rowItem.itemStep,
                    itemNo: rowItem.itemNo
                };
                let _this=this;
                Service.deleteProcessList(params).then((res) => {
                    this.$Modal.success({
                        title: "友情提示",
                        content: "清空成功",
                        onOk(){
                            _this.getTableData();
                        }
                    });
                })
            },
            //note 查询模板详情内容
            // this.showTemplate(params.row.itemNo,params.row.itemStep,params.row.status,params.row.itemMaxStep,params.row.itemTitle)
            showTemplate(rowItem){
                //    this.$router.push({name: '/default',params:{ itemNo:params.row.itemNo,itemStep:params.row.itemStep}});
                debugger;
                localStorage.itemNo=rowItem.itemNo;
                localStorage.status=rowItem.status;
                if(rowItem.itemStep==""){
                    localStorage.itemStep="1";
                }else{
                    localStorage.itemStep=rowItem.itemStep;
                }
                localStorage.maxStep=rowItem.itemMaxStep;
                localStorage.title=rowItem.itemTitle;
                //note 只有第一步才请求，否则直接跳过
               // if(itemStep!="1"){
                localStorage.isRefresh="1";
                this.delLocalCache();
                this.$router.push({name: 'pageDefault',params:{ itemNo:rowItem.itemNo,itemStep:rowItem.itemStep}});
                //}
            },
            pagechange(val){
                this.currentPage=val;
                this.getTableData();
            },
            handleSubmit(name) {
                //note 请求后台，查询列表

                this.currentPage=1;
                this.getTableData();
                /* this.$refs[name].validate((valid) => {
                     if (valid) {
                         this.$Message.success('Success!');
                     } else {
                         this.$Message.error('Fail!');
                     }
                 })*/
            },
          reset () {
            this.formInline = {"itemName":""};
            this.searchTableData()
          },
            searchTableData(){
                this.currentPage=1;
                this.getTableData();
            },
            //note 获取表格数据
            getTableData(){
                let params = {
                    itemName: this.formInline.itemName.replace(/ /g,''),
                    pageNo: this.currentPage
                };
                Service.selectProcessList(params).then((res) => {
              //  this.$http.get('http://39.107.159.54:18884/demo/item/qryConfigFormItemList').then((res) => {
                    this.arr = [];

                    if (res) {
                        this.data5=res.rows;
                        this.total = res.recordsTotal;
                    }
                })
               /* this.$http.get('http://39.107.159.54:18098/item/qryConfigFormItemList').then((response) => {

                    this.data5=response.rows;
                    this.total = response.recordsTotal;
                });*/
            },
            //note 获取表格数据
            getSelectData(){
                this.$http.get('/lib/static/data/stepSelect.json').then((response) => {
                    this.optionsData=response.propArr;
                });
            }
        },
        created() {
            this.currentPage=1;
         //   this.getSelectData();
            this.getTableData();
            //this.getServiceData();
           /* this.initLocalCache();
            this.getServiceData();
            this.getCommonConfig();*/
        }
    }
</script>

<style  scoped>
    .selectTemplate {
      margin: 30px 60px;
    }
    .layout{
        border: 1px solid #d7dde4;
        background: #f5f7f9;
    }
    .layout-logo{
        width: 100px;
        height: 30px;
        background: #5b6270;
        border-radius: 3px;
        float: left;
        position: relative;
        top: 15px;
        left: 20px;
    }
    .layout-nav{
        width: 420px;
        margin: 0 auto;
        color: white;
        text-align: center;
    }
    .ivu-page {
      text-align: right;
      margin-top:20px;
    }
    .ivu-form-item {
      width: 30%;
      margin-left: 22px;
      margin-bottom: 0;
    }

    .ivu-input-wrapper{
        width: 68%;
    }
    .ivu-form-item-content{
     /*   width: 290px;*/
    }
    .ivu-select{
        width: 60%;
    }
</style>
