<template>
  <div class="main">
    <div class="searchs">
      <div class="buttons">
        <el-button size="small" @click="searchsCreate">创建任务</el-button>
        <el-button type="primary" size="small">发布任务</el-button>
        <el-button type="primary" size="small">批量删除</el-button>
      </div>

      <!-- 搜索区 -->
      <el-form class="searchzone" :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="任务类型" class="nature">
          <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-input
            size="small"
            v-model="data.search.keys"
            style="width:160px"
            placeholder="请输入关键词"
          />
        </el-form-item>
        <el-button class="button buttondark" size="small">批量删除</el-button>
      </el-form>
    </div>
    <div class="lists">
      <el-table
        stripe
        class="list"
        ref="multipleTable"
        :data="list.main"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="listPick"
      >
        <el-table-column type="selection" width="60"></el-table-column>
        <el-table-column prop="taskName" label="任务名" align="center" width="200"></el-table-column>
        <el-table-column prop="taskType" label="任务类型" align="center" width="120"></el-table-column>
        <el-table-column prop="bar" label="柜组" align="center" width="120"></el-table-column>
        <el-table-column prop="taskContent" label="任务内容"></el-table-column>
        <el-table-column label="发布日期" width="120">
          <template slot-scope="scope">{{ scope.row.sendDate }}</template>
        </el-table-column>

        <el-table-column label="操作" align="center" fixed="right" width="240">
          <template slot-scope="scope">
            <el-button type="text" @click="testButtonClick(scope.row)">详情</el-button>
            <el-button type="text" @click="testButtonClick(scope.row)">编辑</el-button>
            <el-button type="text" @click="testButtonClick(scope.row.id)">下发</el-button>
            <el-button type="text" @click="testButtonClick(scope.row)" class="listButtonRed">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pages">
      <el-pagination
        @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="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="taskType">
                  <el-select
                    v-model="data.create.taskType"
                    placeholder="请选择任务类型"
                    @change="dialogCreateTaskTypeChange"
                    style="width:100%;"
                  >
                    <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-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="柜组：" prop="bar">
                  <el-select
                    v-model="data.create.bar"
                    placeholder="请选择柜组"
                    @change="dialogCreateBarChange"
                    style="width:100%;"
                  >
                    <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-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="任务周期：" prop="taskTime">
                  <el-select
                    v-model="data.create.bar"
                    placeholder="请选择柜组"
                    @change="dialogCreateBarChange"
                    style="width:100%;"
                  >
                    <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-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="产品详情："  prop="taskTime">

                  <el-date-picker
                    v-model="data.create.taskTime"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    style="width:100%;"
                  >
                  </el-date-picker>

                </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="dialogCreateSubmit('createForm')">保 存</el-button>
    <el-button size="small" type="primary" @click="dialogCreateSubmitSend('createForm')">保存并发布</el-button>
  </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
  import TaskBar from "../bar/index";
  import TaskCom from "../com/index";
  import TaskCount from "../count/index";

  export default {
    components: {},
    data() {
      return {
        cache: {
          status: {
            createDialog: false
          },
          list:{
            taskType: [
              {
                id: "0",
                name: "全部"
              },
              {
                id: "1",
                name: "测试"
              }
            ],
            bar: [
              {
                id: "0",
                name: "全部"
              },
              {
                id: "1",
                name: "柜组1"
              }
            ],
          }
        },
        list: {
          main: [
            {
              id: "1001",
              taskName: "2019年男装销售任务",
              taskType: "拉新",
              bar: "男装",
              taskContent: "任务内容任务内容任务内容...",
              sendDate: "2019/02/08"
            },
            {
              id: "1002",
              taskName: "2019年男装销售任务",
              taskType: "拉新",
              bar: "男装",
              taskContent: "任务内容任务内容任务内容...",
              sendDate: "2019/02/08"
            },
            {
              id: "1003",
              taskName: "2019年男装销售任务",
              taskType: "拉新",
              bar: "男装",
              taskContent: "任务内容任务内容任务内容...",
              sendDate: "2019/02/08"
            }
          ],
        },
        data: {
          search: {
            bar: "",
            taskType: "",
            date: "",
            keys: ""
          },
          create: {
            taskName: '',
            taskType: '',
            bar: '',
            taskTime: '',
            taskDetail: '',
          },
          createDefault: {
            taskName: '',
            taskType: '',
            bar: '',
            taskTime: '',
            taskDetail: '',
          },
          page: {
            nowPageNum: 4
          }
        },
        rule:{
          create: {
            taskName: [{required: true, message: '任务名称不能为空', trigger: 'change'}],
            taskType: [{required: true, message: '任务类型不能为空', trigger: 'change'}],
            taskDetail: [{required: true, message: '任务详情不能为空', trigger: 'change'}],
            bar: [{required: true, message: '柜组不能为空', trigger: 'change'}],
            taskTime: [{required: true, message: '任务周期不能为空', trigger: 'change'}],
          }
        }
      };
    },
    created() {
    },
    methods: {
      searchsCreate(){
        this.cache.status.createDialog = true
      },
      listPick() {
      },
      testButtonClick() {
      },
      pagesSizeChange() {
      },
      pagesNowPageChange() {
      },
      dialogCreateTaskTypeChange(){},
      dialogCreateBarChange(){},
      dialogCreateBeforeClose() {
        this.cache.status.createDialog = false
      },
      dialogCreateCancel() {
        this.data.create = JSON.parse(JSON.stringify(this.data.createDefault))
        this.cache.status.createDialog = false
      },
      dialogCreateSubmit(inForm) {
        this.$refs[inForm].validate(valid => {
          if(valid){

          } else {
            return false
          }
        })
      },
      dialogCreateSubmitSend() {
        this.$refs[inForm].validate(valid => {
          if(valid){

          } else {
            return false
          }
        })
      },
    }
  };
</script>
<style lang="scss" scoped>
  .main {
    // border: 2px solid orange;
    height: 100vh;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }

  /*.searchs {*/
  /*  !*border: 2px solid red;*!*/
  /*  height: 40px;*/
  /*  width: 100%;*/

  /*  display: flex;*/
  /*  flex-direction: row;*/
  /*  justify-content: space-between;*/
  /*  align-items: center;*/
  /*}*/

  .buttons {
    // border: 2px solid darkcyan;
    // width: 30%;
    // min-width: 266px;
    width: 266px;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  .searchzone {
    // border: 2px solid orange;
    height: 40px;
    width: auto;
    min-width: 654px;

    // display: flex;
    // flex-direction: row;
    // justify-content: space-between;
    // align-items: center;
  }

  .lists {
     /*border: 2px solid greenyellow;*/
    height: auto;
    // min-height: 400px;
    min-height: 70%;
    width: 100%;
    /*margin-top: 20px;*/
  }

  .list {
    // border: 1px solid red;
  }

  .listButtonRed {
    // border: 2px solid green;
    color: red;
  }

  .pages {
    // border: 2px solid steelblue;
    height: 40px;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
  }
</style>
<style lang="scss" scoped>
  .dialogMain {
    /*border: 2px solid red;*/
    height: 100%;
  }
</style>
