<template>
  <div class="article-manager">
    <i-page-header title="广告分类"></i-page-header>
    <Card :bordered="false" dis-hover class="ivu-mt">
      <Form ref="artFrom" :model="artFrom" :label-width="75">
        <Row type="flex" :gutter="24">
          <Col v-bind="grid">
            <FormItem label="广告分类：" prop="pid" label-for="pid">
              <Select v-model="artFrom.pid" @on-change="userSearchs" clearable>
                <Option v-for="item in treeSelect" :value="item.id" :key="item.id">{{ item.html + item.cate_name }}</Option>
              </Select>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="状态："  label-for="is_show">
              <Select v-model="artFrom.is_show" placeholder="请选择" clearable  @on-change="userSearchs">
                <Option value="1">显示</Option>
                <Option value="0">隐藏</Option>
              </Select>
            </FormItem>
          </Col>
          <Col v-bind="grid">
            <FormItem label="分类名称："  label-for="status2">
              <Input search enter-button placeholder="请输入" v-model="artFrom.cate_name" @on-search="userSearchs"/>
            </FormItem>
          </Col>
        </Row>
        <Row type="flex">
          <Col v-bind="grid">
            <Button type="primary" class="bnt" icon="md-add" @click="tapAdd">添加广告分类</Button>
          </Col>
        </Row>
      </Form>
      <vxe-table
        class="mt25"
        highlight-hover-row
        :loading="loading"
        header-row-class-name="false"
        :tree-config="{children: 'children',expandAll:true}"
        :data="tableData">
        <vxe-table-column field="id" title="ID"  tooltip width="80"></vxe-table-column>
        <vxe-table-column field="cate_name" tree-node title="分类名称"  min-width="250" ></vxe-table-column>
        <vxe-table-column field="pic" title="显示个数" min-width="100">
          <template v-slot="{ row }">
            <div v-if="row.max_count == 0">无限</div>
            <div v-else>{{ row.max_count }}</div>
          </template>
        </vxe-table-column>

        <vxe-table-column field="is_show" title="状态" min-width="120">
          <template v-slot="{ row }">
            <div v-if="row.type == 1">图文</div>
            <div v-if="row.type == 2">文字</div>
          </template>
        </vxe-table-column>
        <vxe-table-column field="sort" title="排序" min-width="100" tooltip="true"></vxe-table-column>
        <vxe-table-column field="date" title="操作" width="250" fixed="right" align="center">
          <template v-slot="{ row, index }">
            <a @click="tapEdit(row.id)">编辑</a>
            <Divider type="vertical"/>
            <a @click="del(row,'删除商品分类',index)">删除</a>
          </template>
        </vxe-table-column>
      </vxe-table>
    </Card>

    <Modal
      v-model="dialogVisible"
      :title="title"
      @on-cancel="editClose">

      <el-form ref="menu" :model="menu" label-width="80px">
        <el-form-item label="分类名称" prop="cate_name"
                      :rules="[{ required: true, message: '请输入分类名称'}]">
          <el-input placeholder="请输入分类名称" autocomplete="off" v-model="menu.cate_name"></el-input>
        </el-form-item>


        <el-form-item label="归属分类"
        >
          <el-select v-model="menu.pid"  placeholder="归属分类" style=" width: 100%">
            <el-option :label="item.html + item.cate_name" :value="item.id" :key="item.id" v-for="item in treeSelect"></el-option>
          </el-select>
        </el-form-item>


        <el-form-item label="广告类型">

          <el-select v-model="menu.type"  placeholder="广告类型" style=" width: 100%">
            <el-option :label="item.name" :value="item.id" :key="item.id" v-for="item in adverType"></el-option>
          </el-select>

        </el-form-item>


        <el-form-item label="自定义">
          <el-table
            :data="menu.jsonAr"
            tooltip-effect="dark"
            header-cell-class-name="table-header"
          >
            <el-table-column
              prop="name"
              label="属性名"
              width="100">
            </el-table-column>

            <el-table-column
              prop="type"
              label="类型"
              width="100">
              <template slot-scope="scope">
                <div>{{ getJsonName(scope.row.type) }}</div>
              </template>
            </el-table-column>

            <el-table-column
              prop="code"
              label="code"
              width="100">
            </el-table-column>

            <el-table-column
              label="操作">
              <template slot-scope="scope">
                <a @click="tapJsonEdit(scope.$index)">编辑</a>
                <Divider type="vertical"/>
                <a @click="tapJsonDel(scope.$index)">删除</a>
              </template>
            </el-table-column>

          </el-table>

          <Button style="margin-top: 10px;" @click="tapAddJson" type="primary" size="small">添加自定义</Button>
        </el-form-item>


        <el-form-item label="广告数">
          <el-input  placeholder="广告位数" v-model="menu.max_count"></el-input>
          <div>默认0，0无限广告显示</div>
        </el-form-item>



        <el-form-item label="栏目说明">
          <el-input type="textarea" placeholder="栏目说明" v-model="menu.mono"></el-input>
        </el-form-item>


      </el-form>

      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="subAdmin">确 定</el-button>
        </span>
    </Modal>


    <Modal
      v-model="dialogVisible2"
      title="自定义操作"
      :modal="false"
      @on-cancel="editClose2">
      <el-form ref="json" :model="json" label-width="120px">
        <el-form-item label="属性名" prop="name"
                      :rules="[{ required: true, message: '请输入属性名'}]">
          <el-input placeholder="请输入属性名" autocomplete="off" v-model="json.name"></el-input>
        </el-form-item>



        <el-form-item label="code" prop="code"
                      :rules="[{ required: true, message: '请输入属性CODE'}]">
          <el-input placeholder="请输入属性CODE" autocomplete="off" v-model="json.code"></el-input>
        </el-form-item>

        <el-form-item label="属性类型"
                      style="width: 250px;"
                      prop="type"
                      :rules="[{ required: true, message: '请选择属性类型'}]">
          <el-select  v-model="json.type"  placeholder="属性类型" >
            <el-option :label="item.name" :value="item.value" :key="item.value" v-for="item in adverJsonType"></el-option>
          </el-select>
        </el-form-item>

      </el-form>
      <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible2 = false">取 消</el-button>
          <el-button type="primary" @click="subJson">确 定</el-button>
        </span>
    </Modal>

  </div>
</template>

<script>
    import { mapState } from 'vuex';
    import IPageHeader from "../../../layouts/system/page-header/index";
    import Setting from "../../../setting";
    import UiUpload from "../../../ui/upload/index";
    import {SystemAdverPageDel, SystemAdverPageInfo, SystemAdverPage, SystemAdverPageTree,SystemAdverPageUpdate} from "../../../api/system/adver";
    export default {
        name: 'page',
        components: {
            UiUpload,
            IPageHeader
        },
        data () {
            return {
                title : "添加广告分类",
                treeSelect: [],
                FromData: null,
                dialogVisible:false,
                dialogVisible2:false,
                grid: {
                    xl: 7,
                    lg: 7,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                adverType:[
                    {"name":"图片模式",id:1},
                    {"name":"文字模式",id:2},
                ],
                adverJsonType:[
                    {"name":"文本类型","value":"text"},
                    {"name":"图片类型","value":"img"},
                    {"name":"链接类型","value":"url"},
                    {"name":"产品ID","value":"id"},
                ],
                loading: false,
                artFrom: {
                    pid: 0,
                    is_show: '',
                    page: 1,
                    cate_name: ''
                },
                tableData: [],
                menu:{
                    id : 0,
                    cate_name:"",
                    type:1,
                    pid:"0",
                    max_count:0,
                    mono:"",
                    jsonAr:[]
                },
                 menuJsonIndex : -1,
                json:{
                    name:"",
                    code:"",
                    type : ""
                }
            }
        },
        created(){

        },
        mounted () {
            this.goodsCategory();
            this.getList();
        },
        methods: {
            // 商品分类；
            goodsCategory () {
                SystemAdverPageTree().then(res => {
                    this.treeSelect = ([ {'cate_name':'请选择分类','html':"",'id':0} ]).concat(res.data);
                }).catch(res => {
                    this.$Message.error(res.msg);
                })
            },
            // 列表
            getList () {
                this.loading = true;
                this.artFrom.is_show = this.artFrom.is_show || '';
                this.artFrom.pid = this.artFrom.pid || '';
                SystemAdverPage(this.artFrom)
                    .then(res=>{
                        let data = res.data;
                        this.tableData = data;
                        this.loading = false;
                    })
                    .catch(err=>{
                        this.loading = false;
                        this.$Message.error(res.msg);
                    });
            },
            /**
             * 添加新管理人员
             */
            tapAdd:function () {
                this.dialogVisible = true;
                this.$refs['menu'].resetFields();
                this.menu = this.$utils.resetFields(this.menu,{type:1,jsonAr:[]});
            },
            /**
             * 添加自定义分类
             */
            tapAddJson:function(){
                this.dialogVisible2 = true;
                this.$refs['json'].resetFields();
                this.json = this.$utils.resetFields(this.json);
            },
            /**
             * 删除自定义分类
             */
            tapJsonDel:function(index){
                this.menu.jsonAr.splice(index,1);
            },
            /**
             * 修改自定义分类
             */
            tapJsonEdit:function(index){
                this.menuJsonIndex = index;
                this.json = this.menu.jsonAr[index];
                this.dialogVisible2 = true;
            },

            /**
             * 关闭
             */
            editClose:function(){
                this.dialogVisible = false;
            },
            /**
             * 关闭弹出层
             */
            editClose2:function(){
                this.dialogVisible2 = false;
            },
            /**
             * 自定义分类
             */
            subJson:function(){

                this.$refs['json'].validate((valid) => {
                    if (valid) {

                         if(this.menuJsonIndex >= 0) {
                             this.menu.jsonAr[this.menuJsonIndex] = JSON.parse(JSON.stringify(this.json));
                         } else {
                             this.menu.jsonAr.push(JSON.parse(JSON.stringify(this.json)));
                         }
                        this.dialogVisible2 = false;
                    }
                });
            },
            /**
             * 修改数据
             */
            subAdmin:function(){
                this.$refs['menu'].validate((valid) => {
                    if (valid) {
                        let loading = this.$loading("提交数据中...");
                        var data = {};
                        for(var i in this.menu) {
                            if(typeof(this.menu[i]) == "object"){
                                data['json'] = JSON.stringify(this.menu[i]);
                            } else {
                                data[i] = this.menu[i];
                            }
                        }
                        SystemAdverPageUpdate(data)
                            .then(res => {
                                loading.close();
                                if (res.code == 200) {
                                    this.dialogVisible = false;
                                    this.$Message.success("操作成功");
                                    this.getList();
                                    this.goodsCategory();
                                } else {
                                    this.$alert(res.msg, '系统提示');
                                }
                            })
                            .catch(err => {
                                loading.close();
                                this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                            });
                    }
                });
            },
            // 删除
            del (row, tit, num) {
                this.$confirm('此操作将永久删除该栏目分类, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$utils.loading(this, "删除数据中...");
                    SystemAdverPageDel({id: row.id})
                        .then(res => {
                            this.$utils.loadingClose();
                            this.loading = true;
                            if (res.code == 200) {
                                this.getList();
                                this.goodsCategory();
                            } else {
                                this.$alert(res.msg);
                            }
                        })
                        .catch(err => {
                            this.$utils.loadingClose();
                            this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                        });
                });
            },
            /**
             * 修改分类
             */
            tapEdit:function(id){
                this.$utils.loading(this,"获取数据中...");
                SystemAdverPageInfo({id:id})
                    .then(res=>{
                        this.$utils.loadingClose();
                        if(res.code == 200) {
                            this.menu = res.data;
                            this.menu.jsonAr = res.data.json == "" ? [] :  JSON.parse(res.data.json);
                            this.dialogVisible = true;
                            this.title = "修改广告分类";
                        } else {
                            this.$alert(res.msg);
                        }
                    })
                    .catch(err=>{
                        this.$utils.loadingClose();
                        this.$alert("网络繁忙，加载失败，请稍等片刻在尝试!", '系统提示');
                    });
            },
            // 表格搜索
            userSearchs () {
                this.artFrom.page = 1;
                this.getList();
            },

            getJsonName:function (type) {
                for (var i in this.adverJsonType){
                    if(type == this.adverJsonType[i].value) {
                        return this.adverJsonType[i].name;
                    }
                }
            }
        }
    }
</script>
<style scoped lang="stylus">
  .treeSel >>>.ivu-select-dropdown-list
    padding 0 10px!important
    box-sizing border-box
  .tabBox_img
    width 36px
    height 36px
    border-radius:4px
    cursor pointer
    img
      width 100%
      height 100%
</style>
