<template>
  <div class="plan-list">
    <div class="query">
      <div class="tools">
        <el-button type="primary" @click="insert">新建</el-button>
        <el-button type="danger" plain>删除</el-button>
      </div>
      <el-form :inline="true" :model="queryForm" class="query-form">
        <el-form-item label="计划名称">
          <el-input style="width: 200px" v-model="queryForm.name" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="辖区">
          <tree-select
            class="tree-select"
            :options="departs"
            placeholder="请选择"
            :normalizer="normalizer"
            v-model="queryForm.depart"
            noOptionsText="无数据"
            noResultsText="无数据"
          />
        </el-form-item>
        <el-form-item label="驻勤点类型">
          <el-select v-model="queryForm.stationType" placeholder="请选择">
            <el-option v-for="item in stationTypes" :key="item.code" :label="item.name" :value="item.code"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="query">查询</el-button>
          <el-button type="primary" plain @click="back">返回</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table ref="table" :data="tableList" border stripe style="width: 100%" tooltip-effect="dark">
      <el-table-column type="selection" width="60"> </el-table-column>
      <el-table-column type="index" width="60" label="序号"> </el-table-column>
      <el-table-column align="left" label="预案编号" min-width="280" prop="name" show-overflow-tooltip> </el-table-column>
      <el-table-column align="left" label="辖区" min-width="280" prop="region" show-overflow-tooltip> </el-table-column>
      <el-table-column align="left" label="驻勤点类型" min-width="220" prop="type" show-overflow-tooltip> </el-table-column>
      <el-table-column align="left" label="时间范围" min-width="309" prop="datetimerange" show-overflow-tooltip>
      </el-table-column>
      <el-table-column align="left" label="点名时间" min-width="102" prop="time" show-overflow-tooltip> </el-table-column>
      <el-table-column align="left" label="点名数据" min-width="102" prop="data" show-overflow-tooltip> </el-table-column>
      <el-table-column align="center" fixed="right" label="操作" width="157">
        <template slot-scope="scope">
          <div class="table-btn">
            <el-button v-if="scope.row.status === 1" type="text" @click="updateRow(scope.row)"> 编辑 </el-button>
            <el-button v-else type="text" @click="checkRow(scope.row)"> 查看 </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="pagination"
      :current-page="queryForm.pageNum"
      :page-size="queryForm.pageSize"
      :page-sizes="[10, 20, 30, 50]"
      :total="total"
      layout="total, prev, pager, next, sizes"
      @size-change="listSizeChange"
      @current-change="listCurrentChange"
    >
    </el-pagination>
    <el-dialog title="计划详情" :visible.sync="dialogVisible" width="527px">
      <el-form class="plan-form" :model="form" label-width="90px">
        <el-form-item label="计划名称" prop="planName">
          <el-input style="width: 350px" v-model="planForm.planName"></el-input>
        </el-form-item>

        <el-form-item label="点名时间">
          <el-date-picker
            v-model="planForm.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            style="width: 350px"
            value-format="yyyy-MM-dd"
            size="small"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="重复规则">
          <el-select v-model="planForm.repeatRule" placeholder="请选择" style="width: 350px">
            <el-option label="周一" value="1"></el-option>
            <el-option label="周二" value="2"></el-option>
            <el-option label="周三" value="3"></el-option>
            <el-option label="周四" value="4"></el-option>
            <el-option label="周五" value="5"></el-option>
            <el-option label="周六" value="6"></el-option>
            <el-option label="周天" value="7"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="辖区">
          <tree-select
            class="tree-select"
            :options="departs"
            placeholder="请选择"
            :normalizer="normalizer"
            v-model="planForm.depart"
            noOptionsText="无数据"
            noResultsText="无数据"
          />
        </el-form-item>
        <el-form-item label="驻勤点类型">
          <el-select v-model="planForm.stationType" placeholder="请选择" multiple style="width: 350px">
            <el-option v-for="item in stationTypes" :key="item.code" :label="item.name" :value="item.code"> </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="tools">
        <el-button type="primary" size="small" @click="insertPlan">新建</el-button>
        <el-button type="danger" size="small" plain>删除</el-button>
      </div>
      <el-table ref="table" :data="planTableList" border stripe style="width: 440px" tooltip-effect="dark" max-height="150">
        <el-table-column type="index" align="center" width="60" label="序号"> </el-table-column>
        <el-table-column align="center" label="点名时间" min-width="102" prop="planTime" show-overflow-tooltip>
          <template slot-scope="{ row }">
            <el-time-select placeholder="选择时间" v-model="row.planTime"></el-time-select>
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="120">
          <template slot-scope="scope">
            <div class="table-btn">
              <el-button type="success" size="mini" icon="el-icon-check" circle> </el-button>
              <el-button type="danger" size="mini" icon="el-icon-delete" circle> </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import treeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getAllStationTypes } from "@/api/security-station-controller";
import { getDeparts } from "@/api/departs-controller";
export default {
  name: "planList",
  components: {
    treeSelect,
  },
  data() {
    return {
      queryForm: {
        name: "",
        stationType: "", //驻勤点类型
        depart: null, //辖区
        pageNum: 1,
        pageSize: 10,
      },
      tableList: [],
      planTableList: [
        {
          planTime: "04:08:20",
        },
        {
          planTime: "03:08:20",
        },
      ],
      total: 0,
      dialogVisible: false,
      dialogType: "",
      stationTypes: [],
      departs: [],
      normalizer(node) {
        if (node.children && !node.children.length) {
          delete node.children;
        }
        return {
          id: node.code,
          label: node.name,
          children: node.children,
          isDisabled: !node.selectable,
        };
      },
      planForm: {
        planName: "", //计划名称
        beginTime: "", //点名时间
        endTime: "", //点名时间
        time: "",
        repeatRule: "", //重复规则
        depart: null, //辖区
        stationType: "", //驻勤点类型
      },
    };
  },
  methods: {
    async init() {
      this.stationTypes = await getAllStationTypes(); //获取驻勤点信息
      console.log("stationTypes", this.stationTypes);
      this.departs = await getDeparts(); // 获取辖区树
      console.log("departs", this.departs);
    },
    query() {},
    back() {
      this.$emit("back");
    },
    updateRow() {},
    checkRow() {},
    listSizeChange() {},
    listCurrentChange() {},
    insert() {
      this.dialogType = "insert";
      this.dialogVisible = true;
    },
    addPlanDetail() {},
    delPlanDetail() {},
  },
  mounted() {
    this.init();
  },
};
</script>

<style scoped lang="scss">
.tree-select {
  //padding-top: 6px;
  width: 400px;
  // font-size: 14px;
  line-height: 35px;
  // font-family: PingFang SC-Regular, PingFang SC;
  // font-weight: 400;
  color: #606266;
  .vue-treeselect__placeholder {
    line-height: 35px;
  }

  .vue-treeselect__control {
    height: 35px !important;
  }
  .vue-treeselect__placeholder,
  .vue-treeselect__single-value {
    line-height: 35px;
  }
}
.plan-list {
  width: 100%;
  height: 100%;
  .query {
    width: 100%;
    height: 153px;
    background: #f5faff;
    box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.04);
    margin-bottom: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    // flex-wrap: wrap;
    justify-content: space-between;
    .tools {
      width: 100%;
      .el-button {
        margin-right: 24px;
      }
    }
    .query-form {
      margin-top: 10px;
    }
  }
  .pagination {
    margin-top: 61px;
  }
}
.plan-form {
  .el-form-item {
    margin-bottom: 20px;
  }
}
</style>
