<template>
  <div class="ztask-coms">
    <div class="ztask-searchs">
      <div class="ztask-searchs-items">
        <el-button size="small" @click="searchsCreate">创建任务</el-button>
        <el-button type="primary" size="small" @click="searchsDels">批量删除</el-button>
      </div>
      <div class="ztask-searchs-items">
        <el-form class="ztask-searchs-forms" :inline="true" :model="data.search" label-width="auto">
          <el-form-item label="柜组">
            <el-select
              size="small"
              v-model="data.search.bar"
              placeholder="请选择柜组"
              style="width:160px;"
            >
              <el-option
                v-for="item in cache.list.bar"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="任务类型">
            <el-select
              size="small"
              v-model="data.search.taskType"
              placeholder="请选择任务类型"
              style="width:160px;"
            >
              <el-option
                v-for="item in cache.list.taskType"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="日期">
            <el-date-picker
              size="small"
              v-model="data.search.taskDate"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              style="width:200px;">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="关键词">
            <el-input
              size="small"
              v-model="data.search.keys"
              style="width:160px"
              placeholder="请输入关键词"
            />
          </el-form-item>
        </el-form>


        <el-button type="primary" size="small" @click="searchsSearch">搜 索</el-button>
      </div>
    </div>
    <div class="ztask-charts">
      <ve-histogram class="ztask-chart" :data="list.chart" v-bind="setting.chart"></ve-histogram>
    </div>
    <div class="ztask-lists">
      <el-table
        stripe
        ref="multipleTable"
        :data="list.main"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="listsSelectChange"
      >
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column prop="barName" label="门店" align="center" width="200"></el-table-column>
        <el-table-column prop="barType" label="门店类型" align="center"></el-table-column>
        <el-table-column prop="customNew" label="拉新" align="center"></el-table-column>
        <el-table-column prop="customRebuy" label="复购" align="center"></el-table-column>
      </el-table>

    </div>


    <div class="ztask-pages">
      <el-pagination
        class="ztask-page"
        @size-change="pagesSizeChange"
        @current-change="pagesNowPageChange"
        :current-page="data.page.nowPageNum"
        :page-sizes="[100, 200, 300, 400]"
        :page-size="100"
        layout="prev, pager, next, sizes, jumper"
        :total="400"
      ></el-pagination>
    </div>
    <div class="ztask-dialogs">
      <el-dialog
        title="创建集团任务"
        :visible.sync="cache.status.createDialog"
        width="60%"
        :before-close="dialogCreateBeforeClose"
      >
        <div class="dialogMain">
          <el-form :model="data.create" :rules="rule.create" label-width="120px" ref="createForm">
            <el-row>
              <el-col :span="24">
                <el-form-item label="任务标题：" prop="taskName">
                  <el-input v-model="data.create.taskName" autocomplete="off" placeholder="请输入任务标题"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="作者：" prop="author">
                  <el-select
                    v-model="data.create.author"
                    placeholder="请选择作者"
                    @change="dialogCreateAuthorChange"
                    style="width:100%;"
                  >
                    <el-option
                      v-for="item in list.man"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="任务详情：" prop="taskDetail">
                  <el-input
                    type="textarea"
                    :rows="5"
                    placeholder="请输入任务详情"
                    v-model="data.create.taskDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogCreateCancel">取 消</el-button>
          <el-button size="small" type="primary" @click="dialogCreateSubmitSend('createForm')">保存并发布</el-button>
        </span>
      </el-dialog>
      <el-dialog
        title="查看集团任务"
        :visible.sync="cache.status.seeDialog"
        width="60%"
        :before-close="dialogSeeBeforeClose"
      >
        <div class="dialogMain">
          <el-form :model="data.see" :rules="rule.see" label-width="120px" ref="seeForm">
            <el-row>
              <el-col :span="24">
                <el-form-item label="任务标题：" prop="taskName">
                  <el-input :disabled="true" v-model="data.see.taskName" autocomplete="off"
                            placeholder="任务标题为空"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="作者：" prop="author">
                  <el-input :disabled="true" v-model="data.see.authore" autocomplete="off"
                            placeholder="作者为空"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="任务详情：" prop="taskDetail">
                  <el-input
                    :disabled="true"
                    type="textarea"
                    :rows="5"
                    placeholder="任务详情为空"
                    v-model="data.see.taskDetail"
                  ></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button size="small" @click="dialogSeeCancel">取 消</el-button>
          <el-button size="small" type="primary" @click="dialogSeeSubmitSend('createForm')">发 布</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import list from '@/pages/task/count/list.js'

  export default {
    mixins: [
      list
    ],
    components: {},
    data() {
      return {
        cache: {
          status: {
            createDialog: false,
            seeDialog: false
          },
          list: {
            bar: [
              {
                id: "0",
                name: "全部"
              },
              {
                id: "1",
                name: "柜组1"
              }
            ],
            taskType: [
              {
                id: "0",
                name: "全部"
              },
              {
                id: "1",
                name: "测试"
              }
            ],
            status: [
              {
                id: "0",
                name: "全部"
              },
              {
                id: "1",
                name: "已发布"
              }
            ],
          }
        },
        list: {
          chart: {},
          main: [
            {
              id: '1001',
              barName: 'Asics 店',
              barType: '专柜',
              customNew: '10',
              customRebuy: '20'
            },
            {
              id: '1002',
              barName: 'Bape 店',
              barType: '专柜',
              customNew: '18',
              customRebuy: '10'
            },
            {
              id: '1003',
              barName: 'Champion 店',
              barType: '普通门店',
              customNew: '24',
              customRebuy: '40'
            },
            {
              id: '1004',
              barName: 'Dior 店',
              barType: '普通门店',
              customNew: '40',
              customRebuy: '15'
            },
            {
              id: '1005',
              barName: 'Edc 店',
              barType: '专柜',
              customNew: '22',
              customRebuy: '8'
            },
            {
              id: '1006',
              barName: 'FILA 店',
              barType: '专柜',
              customNew: '30',
              customRebuy: '14'
            },
            {
              id: '1007',
              barName: 'Gaucho 店',
              barType: '专柜',
              customNew: '20',
              customRebuy: '15'
            },
            {
              id: '1008',
              barName: 'Hermes 店',
              barType: '专柜',
              customNew: '8',
              customRebuy: '20'
            },
            {
              id: '1009',
              barName: 'Isolda 店',
              barType: '普通门店',
              customNew: '11',
              customRebuy: '23'
            },
            {
              id: '1010',
              barName: 'Jeanswest 店',
              barType: '普通门店',
              customNew: '40',
              customRebuy: '20'
            },
            {
              id: '1011',
              barName: 'Kevin 店',
              barType: '普通门店',
              customNew: '11',
              customRebuy: '14'
            },
            {
              id: '1012',
              barName: 'Lux 店',
              barType: '专柜',
              customNew: '24',
              customRebuy: '14'
            },
          ],
          man: [
            {
              id: '1001',
              name: 'Alice'
            },
            {
              id: '1002',
              name: 'Bob'
            },
            {
              id: '1003',
              name: 'Clid'
            },
            {
              id: '1004',
              name: 'Dive'
            },
          ]
        },
        data: {
          search: {
            bar: '',
            taskType: '',
            taskDate: '',
            keys: '',
          },
          page: {
            nowPageNum: 1,
          },
          create: {
            taskName: '',
            author: '',
            taskDetail: '',
          },
          createDefault: {
            taskName: '',
            author: '',
            taskDetail: '',
          },
          see: {
            taskName: '',
            author: '',
            taskDetail: '',
          },
          seeDefault: {
            taskName: '',
            author: '',
            taskDetail: '',
          },
        },
        rule: {
          create: {
            taskName: [{required: true, message: '任务名称不能为空', trigger: 'change'}],
            taskDetail: [{required: true, message: '任务详情不能为空', trigger: 'change'}],
          },
          see: {},
        },
        setting: {
          chart: {
            yAxisType: ['KMB'],
            yAxisName: ['数值']
          }
        }
      };
    },
    created() {
    },
    methods: {
      searchsCreate() {
        this.cache.status.createDialog = true
      },
      searchsDels() {
      },
      searchsSearch() {
        this.list.chart = {}

        this.list.chart = {
          columns: ['日期', '访问用户', '下单用户', '下单率'],
          rows: [
            {'日期': '1', '访问用户': 20, '下单用户': 10, '下单率': 50, '专柜类型': '普通店铺'},
            {'日期': '2', '访问用户': 30, '下单用户': 15, '下单率': 50, '专柜类型': '普通店铺'},
            {'日期': '3', '访问用户': 40, '下单用户': 20, '下单率': 50, '专柜类型': '普通店铺'},
            {'日期': '4', '访问用户': 50, '下单用户': 25, '下单率': 50, '专柜类型': '普通店铺'},
            {'日期': '5', '访问用户': 60, '下单用户': 30, '下单率': 50, '专柜类型': '普通店铺'},
            {'日期': '6', '访问用户': 70, '下单用户': 35, '下单率': 50, '专柜类型': '普通店铺'}
          ]
        }
      },

      listsSelectChange() {
      },
      listsUntopClick() {
      },
      listsTopClick() {
      },
      listsSeeClick(inData) {
        this.cache.status.seeDialog = true

        this.data.see = {
          taskName: 'Bob',
          author: 'author',
          taskDetail: 'taskDetail',
        }


      },
      listsEditClick(inData) {
        this.cache.status.createDialog = true

        this.data.create = {
          taskName: 'taskName',
          author: 'author',
          taskDetail: 'taskDetail',
        }

      },
      listsDelClick() {
      },

      pagesSizeChange() {
      },
      pagesNowPageChange() {
      },

      dialogCreateAuthorChange() {
      },
      dialogCreateBeforeClose() {
        this.cache.status.createDialog = false
      },
      dialogCreateCancel() {
        this.data.create = JSON.parse(JSON.stringify(this.data.createDefault))
        this.cache.status.createDialog = false
      },
      dialogCreateSubmitSend() {
        this.$refs[inForm].validate(valid => {
          if (valid) {

          } else {
            return false
          }
        })
      },

      dialogSeeBeforeClose() {
        this.cache.status.seeDialog = false
      },
      dialogSeeCancel() {
        this.data.see = JSON.parse(JSON.stringify(this.data.seeDefault))
        this.cache.status.seeDialog = false
      },
      dialogSeeSubmitSend() {
      },
    }
  };
</script>
<style lang="scss" scoped>
  .ztask-coms {
    /*border: 2px solid cyan;*/

    height: calc((100vh - 220px) * 1.0);
  }

  .ztask-searchs {
    /*border: 2px solid #0ea4c5;*/
    height: 70px;

    display: flex;
    flex-direction: row;
    justify-content: space-between;
  }

  .ztask-searchs-items {
    /*border: 2px solid #00c561;*/

    margin: 17px 0px 20px 0px;
    width: auto;

    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
  }

  .ztask-searchs-forms {
    /*border: 2px solid #f900ff;*/
    height: 30px;
    margin-bottom: 10px;
  }

  .ztask-charts {
    /*border: 2px solid green;*/
    background-color: rgba(220, 220, 220, 0.5);
    height: 262px;
  }

  .ztask-chart {
    /*border: 2px solid deeppink;*/
    /*height: 50%;*/
    height: 50px;
    width: 100%;
  }

  .ztask-lists {
    /*border: 2px solid red;*/
    height: calc((100vh - 600px) * 1.0);
    overflow: auto;
  }

  .ztask-pages {
    /*border: 2px solid red;*/
    /*height: 56px;*/
    height: 42px;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
  }

  .ztask-page {
    /*border: 2px solid red;*/
    position: relative;
    margin-right: 0;
  }

  .buttonTextNormal {
    color: #666666;
  }

  .buttonTextWarning {
    color: #D0021B;
  }
</style>