<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin: 0px">
      <!-- 搜索条件--产线层级 -->
      <div class="filter">
        <label>{{ $t(1132) }}：</label>
        <Cascader
          :data="datalevel"
          :value="leveldata"
          trigger="click"
          change-on-select
          class="searchSelect"
          @on-change="getlevel"
        ></Cascader>
      </div>
      <!-- 搜索条件--时间范围 -->
      <div class="filter">
        <label>{{ $t(900908) }}：</label>
        <DatePicker
          type="daterange"
          :value="dateTime"
          class="searchInput middleWidth"
          @on-change="selectdate"
        ></DatePicker>
      </div>
      <!-- 搜索条件--快捷日期 -->
      <div class="filter">
        <label>{{ $t(900910) }}</label>
        <Select
          v-model="quickDate"
          @on-change="timechange"
          class="searchSelect"
        >
          <Option :value="1" id="今天">{{ $t(900911) }}</Option>
          <Option :value="2" id="昨天">{{ $t(900390) }}</Option>
          <Option :value="3" id="本周">{{ $t(900912) }}</Option>
          <Option :value="4" id="上周">{{ $t(900913) }}</Option>
          <Option :value="5" id="本月">{{ $t(900914) }}</Option>
          <Option :value="6" id="上月">{{ $t(900915) }}</Option>
          <Option :value="7" id="本年">{{ $t(900916) }}</Option>
          <Option :value="8" id="上年">{{ $t(900917) }}</Option>
        </Select>
      </div>
      <!-- 搜索条件--订单号 -->
      <div class="filter">
        <label>{{ $t(300038) }}：</label>
        <Input class="searchInput" v-model="orderNo" />
      </div>
      <!-- 次级搜索条件 -->
      <div v-show="!morecondition">
        <!-- 搜索条件--班组 -->
        <div class="filter">
          <label>{{ $t(950289) }}：</label>
          <Select
            v-model="team"
            clearable
            class="searchSelect"
            @on-change="teamChange"
          >
            <Option v-for="(v, i) in teamList" :key="i" :value="v.id">{{
              v.name
            }}</Option>
          </Select>
        </div>
        <!-- 搜索条件--人员 -->
        <div class="filter" v-if="staffList.length">
          <label>{{ $t(100046) }}：</label>
          <Select v-model="staff" clearable class="searchSelect">
            <Option v-for="(v, i) in staffList" :key="i" :value="v.id">{{
              v.name
            }}</Option>
          </Select>
        </div>
        <!-- 搜索条件--横坐标 -->
        <div class="filter">
          <label>{{ $t(900675) }}</label>
          <Select
            v-model="abscissa"
            class="searchSelect"
            @on-change="abscissaChange"
          >
            <Option :value="1">订单号</Option>
            <Option :value="2">人员</Option>
            <Option :value="3">工单号</Option>
            <!-- <Option :value="4">班组</Option>
            <Option :value="5">产线层级</Option> -->
          </Select>
        </div>
      </div>
      <!-- 按钮组 -->
      <div class="searchBtn">
        <Button
          type="primary"
          class="twoWord"
          icon="ios-search-outline"
          @click="search()"
          >{{ $t(1001) }}</Button
        >
        <Button
          type="primary"
          class="fourWord"
          icon="ios-download-outline"
          @click="output()"
          >{{ $t(1007) }}</Button
        >
      </div>
      <!-- 次级搜索条件是否显示 -->
      <MoreConbtn
        @getCon="morecondition = !morecondition"
        :morecondition="morecondition"
      ></MoreConbtn>
    </div>
    <div class="divborder newEchartStyle">
      <div id="echo_echart" class="echartsId"></div>
    </div>
    <!-- 横坐标--订单号 -->
    <div v-if="abscissa == 1" class="divborder newTableDiv">
      <Table
        class="echartsTable"
        :data="tableData"
        :columns="tableColumns"
      ></Table>
    </div>
    <!-- 横坐标--人员 -->
    <div v-if="abscissa == 2" class="divborder newTableDiv">
      <Table
        class="echartsTable"
        :data="tableData"
        :columns="tableColumns"
      ></Table>
    </div>
    <!-- 横坐标--工单号 -->
    <div v-if="abscissa == 3" class="divborder newTableDiv">
      <Table
        class="echartsTable"
        :data="tableData"
        :columns="tableColumns"
      ></Table>
    </div>
    <!-- 横坐标--班组 -->
    <!-- <div v-if="abscissa == 4" class="divborder newTableDiv">
      <Table
        v-if="tableData.length"
        class="echartsTable"
        :data="tableData"
        :columns="tableColumns4"
      ></Table>
    </div> -->
    <!-- 横坐标--产线层级 -->
    <!-- <div v-if="abscissa == 5" class="divborder newTableDiv">
      <Table
        v-if="tableData.length"
        class="echartsTable"
        :data="tableData"
        :columns="tableColumns5"
      ></Table>
    </div> -->
  </div>
</template>

<script>
import echarts from "echarts";
import moment from "moment";

export default {
  data() {
    return {
      // 班组下拉列表
      teamList: [],
      // 人员下拉列表
      staffList: [],
      // 级联选择器树形结构数据
      datalevel: [],
      // 搜索条件--产线层级
      leveldata: [],
      // 搜索条件--时间范围
      dateTime: [],
      // 快捷日期类型
      quickDate: 1,
      // 横坐标
      abscissa: 1,
      // 次级搜索条件是否展示
      morecondition: false,
      // 搜索条件--订单号
      orderNo: "",
      // 搜索条件--班组
      team: "",
      // 搜索条件--人员
      staff: 0,
      // 表格数据
      tableData: [],
      // 表格字段--订单号
      tableColumns1: [
        {
          type: "index",
          width: 60,
          title: "序号",
        },
        {
          title: "订单号",
          key: "ordernumber",
        },
        {
          title: "工单号",
          key: "code",
        },
        {
          title: "产品名称",
          key: "product_name",
        },
        {
          title: "产品图号",
          key: "",
        },
        {
          title: "产出数量",
          key: "total",
        },
        {
          title: "生产工时",
          key: "working_hour",
        },
      ],
      // 表格字段--人员
      tableColumns2: [
        {
          type: "index",
          width: 60,
          title: "序号",
        },
        {
          title: "姓名",
          key: "user_name",
        },
        {
          title: "工号",
          key: "work_code",
        },
        {
          title: "班组",
          key: "group_name",
        },
        {
          title: "订单号",
          key: "ordernumber",
        },
        {
          title: "工单号",
          key: "code",
        },
        {
          title: "产品名称",
          key: "product_name",
        },
        {
          title: "工序名称",
          key: "gonglingdan",
        },
        {
          title: "生产数量",
          key: "total",
        },
        {
          title: "生产工时（分）",
          key: "working_hour",
        },
      ],
      // 表格字段--工单号
      tableColumns3: [
        {
          type: "index",
          width: 60,
          title: "序号",
        },
        {
          title: "订单号",
          key: "ordernumber",
        },
        {
          title: "工单号",
          key: "code",
        },
        {
          title: "产品名称",
          key: "product_name",
        },
        {
          title: "产品图号",
          key: "",
        },
        {
          title: "产出数量",
          key: "total",
        },
        {
          title: "生产工时",
          key: "working_hour",
        },
      ],
      // 表格字段--班组
      tableColumns4: [
        {
          type: "index",
          width: 60,
          title: "序号",
        },
        {
          title: "班组",
          key: "",
        },
        {
          title: "生产数量",
          key: "total",
        },
        {
          title: "生产工时",
          key: "working_hour",
        },
      ],
      // 表格字段--产线层级
      tableColumns5: [
        {
          type: "index",
          width: 60,
          title: "序号",
        },
        {
          title: "产线名称",
          key: "sectionidtitle",
        },
        {
          title: "工单号",
          key: "code",
        },
        {
          title: "产品名称",
          key: "product_name",
        },
        {
          title: "产品图号",
          key: "",
        },
        {
          title: "产出数量",
          key: "total",
        },
        {
          title: "生产工时",
          key: "working_hour",
        },
      ],
      // 表格字段--重写
      tableColumns: [
        {
          type: "index",
          width: 60,
          title: "序号",
          align: "center",
        },
        {
          title: "工号",
          key: "usercode",
        },
        {
          title: "姓名",
          key: "username",
        },
        {
          title: "订单号",
          key: "orderno",
        },
        {
          title: "工单号",
          key: "code",
        },
        {
          title: "工令单号",
          key: "workcode",
        },
        {
          title: "工序名称",
          key: "routename",
        },
        {
          title: "工位",
          key: "machine",
        },
        {
          title: "产品名称",
          key: "productname",
        },
        {
          title: "产品图纸号",
          key: "productdraw",
        },
        {
          title: "报工时间",
          width: 150,
          align: "center",
          render: (h, params) => {
            let time = params.row.time;
            let text = moment(new Date(time * 1000)).format(
              "YYYY-MM-DD HH:mm:ss"
            );
            return h("div", {
              domProps: {
                innerHTML: text,
              },
            });
          },
        },
        {
          title: "OK数量",
          key: "okcnt",
        },
        {
          title: "NOK数量",
          key: "ngcnt",
        },
        {
          title: "工时",
          key: "workingmin",
        },
      ],
    };
  },
  mounted() {
    // 初始化时间范围搜索条件
    this.initTime();
    // 初始化产线层级搜索条件
    this.initLevel();
    // 查询
    this.search();
    // 获取班组下拉列表
    this.getTeamList();
  },
  methods: {
    // 获取班组下拉列表
    getTeamList() {
      const _this = this;
      _this.axios
        .request({
          url: "config/WorkingGroup/GetAllWorkGroup",
          params: {
            departid: 0,
          },
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.teamList = [];
            let data = result.data;
            if (data && Array.isArray(data) && data.length) {
              _this.teamList = data;
            }
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 监听班组变化
    teamChange() {
      const _this = this;
      // 每次班组变化，都得将人员复位到 0
      _this.staff = 0;
      _this.staffList = [];
      if (!_this.team) {
        return false;
      }
      _this.axios
        .request({
          url: "config/WorkingGroup/GetAllUsersByWorkGroup",
          params: {
            id: _this.team,
          },
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            let data = result.data;
            if (data && Array.isArray(data) && data.length) {
              _this.staffList = data;
            }
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 初始化时间范围
    initTime() {
      // 时间赋值
      let date = new Date();
      let v = this.$time.timestampToTime(date.getTime());
      this.dateTime = [v, v];
    },
    // 监听时间范围变化
    selectdate(v) {
      this.dateTime = v;
    },
    // 初始化产线层级级联数据
    initLevel() {
      const _this = this;
      _this.axios
        .request({
          url: "config/ProjectLevelSection/GetSectionTree",
          method: "get",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            _this.datalevel = result.data;
            _this.leveldata = [result.data[0].value];
          } else {
            _this.$Message.error(_this.$t(result.msg));
          }
        });
    },
    // 监听产线层级变化
    getlevel(v) {
      this.leveldata = v;
    },
    // 监听横坐标变化
    abscissaChange() {
      this.search();
    },
    // 监听快捷日期变化
    timechange() {
      let time = this.$time.changetime(this.quickDate).split(" - ");
      this.dateTime = [time[0], time[1]];
    },
    // 查询 Or 导出
    search(isOutput) {
      const _this = this;
      // 清空一下数据
      _this.tableData = [];
      // 解构取值
      let { leveldata, dateTime, abscissa, orderNo, team, staff } = this;

      let data = {
        starttime: dateTime[0] ? moment(dateTime[0]).format("YYYY-MM-DD") : "",
        endtime: dateTime[1] ? moment(dateTime[1]).format("YYYY-MM-DD") : "",
        ordernumber: orderNo,
        sectionid: leveldata[leveldata.length - 1]
          ? leveldata[leveldata.length - 1]
          : 0,
        groupid: team,
        userid: staff,
        type: abscissa,
        toexcel: isOutput ? isOutput : 0,
      };
      if (team) {
        if (!staff) {
          _this.$Message.error("请选择人员！");
          return false;
        }
      }
      _this.axios
        .request({
          url: "cnc/PerformanceStatistics/WorkingHourStatistics",
          data,
          method: "post",
        })
        .then((res) => {
          let result = res.data;
          if (result.ret == 1) {
            if (isOutput == 1) {
              location.href = _this.axios.publicPath + result.data;
              return false;
            }
            // 渲染表格数据
            if (
              result.data &&
              Array.isArray(result.data) &&
              result.data.length
            ) {
              _this.tableData = result.data;
            }
            // 渲染可视化图表
            let xdata = result.xdata;
            let ydata = result.ydata;
            if (xdata && ydata) {
              _this.renderCanvas(xdata, ydata);
            }
          } else {
            _this.$Message(_this.$t(result.msg));
          }
        });
    },
    // 渲染可视化图表
    renderCanvas(xList, yList) {
      let myChart = echarts.init(document.getElementById("echo_echart"));
      let option = {
        title: false,
        color: ["#3398DB"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          left: "4%",
          right: "4%",
          bottom: "5%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xList,
            axisLabel: {
              interval: 0,
              rotate: 30,
            },
          },
        ],
        yAxis: [
          {
            name: "工时",
            type: "value",
          },
        ],
        series: [
          {
            name: "工时",
            barMaxWidth: 70,
            type: "bar",
            data: yList,
          },
        ],
      };
      myChart.setOption(option);
    },
    // 数据导出
    output() {
      this.search(1);
    },
  },
};
</script>
