<template>
  <div class="testdiv">
    <div class="divborder leftDiv">
      <Tree class="treeDiv" :data="data1" ref="tree" @on-select-change="getCycle()"></Tree>
    </div>
    <div class="rightDiv">
    <div class="divborder newSearchDiv">
      <div class="tabWrap">
        <div
          class="tab"
          v-for="(item,index) in cycleList"
          :class="{active:changeIndex==index}"
          @click="changeDatepick(index)"
          :key="index"
        >{{item.title}}</div>
      </div>
      <div>
        <div class="filter" v-show="kpiCycle ==1">
          <label>{{$t(1142)}}：</label>
          <DatePicker
            type="year"
            placement="bottom-end"
            class="searchInput marginR_o"
            value="yyyy"
            ref="year1"
            v-model="year"
            @on-change="getYear($event)"
          ></DatePicker>
          <DatePicker
            type="year"
            placement="bottom-end"
            class="searchInput"
            value="yyyy"
            ref="year2"
            v-model="year2"
            @on-change="getYear2($event)"
          ></DatePicker>
        </div>
        <div class="filter" v-show="kpiCycle ==2">
          <label>{{$t(1140)}}：</label>
          <DatePicker
            type="year"
            placement="bottom-end"
            class="searchInput marginR_o"
            value="yyyy"
            ref="year3"
            v-model="year3"
            @on-change="getQar($event)"
          ></DatePicker>
          <Select v-model="quarter" class="searchSelect marginR_o">
            <Option value="1" v-text="$t(90000055)">第一季度</Option>
            <Option value="2" v-text="$t(90000056)">第二季度</Option>
            <Option value="3" v-text="$t(90000057)">第三季度</Option>
            <Option value="4" v-text="$t(90000058)">第四季度</Option>
          </Select>
          <DatePicker
            type="year"
            placement="bottom-end"
            class="searchInput marginR_o"
            value="yyyy"
            ref="year4"
            v-model="year4"
            @on-change="getQar2($event)"
          ></DatePicker>
          <Select v-model="quarter1" class="searchSelect">
            <Option value="1" v-text="$t(90000055)">第一季度</Option>
            <Option value="2" v-text="$t(90000056)">第二季度</Option>
            <Option value="3" v-text="$t(90000057)">第三季度</Option>
            <Option value="4" v-text="$t(90000058)">第四季度</Option>
          </Select>
        </div>
        <div class="filter" v-show="kpiCycle ==3">
          <label>{{$t(1138)}}：</label>
          <DatePicker
            type="month"
            placement="bottom-end"
            class="searchInput marginR_o"
            value="yyyy-MM"
            ref="month"
            v-model="month"
            @on-change="getMonth($event)"
          ></DatePicker>
          <DatePicker
            type="month"
            placement="bottom-end"
            class="searchInput"
            value="yyyy-MM"
            v-model="month2"
            ref="month2"
            @on-change="getMonth2($event)"
          ></DatePicker>
        </div>
        <div class="filter" v-show="kpiCycle ==4">
          <label>{{$t(1136)}}：</label>
          <DatePicker
            type="daterange"
            show-week-numbers
            placement="bottom-end"
            class="searchInput"
            v-model="week"
            ref="week"
            @on-change="getWeek($event)"
          ></DatePicker>
        </div>
        <div class="filter" v-show="kpiCycle ==5">
          <label>{{$t(900864)}}：</label>
          <DatePicker
            type="daterange"
            v-model="day"
            placement="bottom-end"
            class="searchInput middleWidth"
            ref="day"
            @on-change="getDay($event)"
          ></DatePicker>
        </div>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="search()">{{$t('1001')}}</Button>
        <!-- <Button type="primary" icon="md-download" @click="downexcel()">导出</Button> -->
      </div>

    </div>
    <div class="divborder newTableDiv">
        <Table
          class="tableClass"
          @on-current-change="handleRowChange"
          highlight-row
          :loading="loading"
          :max-height="600"
          :data="tableData"
          :columns="tableColumns"
        ></Table>
    </div>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import axios from '@/libs/api.request'
export default {
    // name: 'tree_select_page',
    components: {},
    data () {
        return {
            loading: false,
            headers: {
                // 上传请求头添加
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            data1: [],
            kpiCycle: 0,
            tableData: [],
            changeIndex: 100,
            tableColumns: [
                {
                    title: this.$t(1008),
                    key: 'order',
                    align: 'center'
                },
                {
                    title: this.$t(600532), // '日期
                    key: 'date',
                    align: 'center'
                },
                {
                    title: this.$t(950386), // 目标值
                    key: 'targetVal',
                    align: 'center',
                    render: (h, params) => {
                        return h('Input', {
                            props: {
                                size: 'small',
                                value: params.row.targetVal,
                                disabled: params.row.enable === 0
                            },
                            on: {
                                'on-blur': e => {
                                    if (e.target.value === '' || e.target.value == null) {
                                        return false
                                    }
                                    if (isNaN(e.target.value)) {
                                        this.$Message.error(this.$t(1590008))
                                        return false
                                    }
                                    let data = {
                                        taskId: params.row.taskId,
                                        actVal: params.row.actVal,
                                        targetVal: e.target.value,
                                        addVal: params.row.addVal,
                                        remark: params.row.remark,
                                        InputType: 2
                                    }
                                    this.loading = true;
                                    axios
                                        .request({
                                            url: '/kpi/tasklist/UpdValue',
                                            data,
                                            method: 'post'
                                        })
                                        .then(res => {
                                            var that = this;
                                            setTimeout(function () {
                                                if (res.data.ret === 1) {
                                                    that.$Message.success(that.$t(90000054))
                                                } else {
                                                    that.$Message.error(that.$t(res.data.msg))
                                                }
                                                that.loading = false;
                                            }, 1000);
                                        })
                                }
                            }
                        })
                    }
                },
                {
                    title: this.$t(950408), // 实际值
                    key: 'trueValue',
                    align: 'center',
                    render: (h, params) => {
                        return h('Input', {
                            props: {
                                size: 'small',
                                value: params.row.trueVal,
                                disabled: params.row.enable === 0
                            },
                            on: {

                                'on-blur': e => {
                                    // if (e.target.value === '' || e.target.value == null) {
                                    //   return false
                                    // }
                                    if (isNaN(e.target.value)) {
                                        this.$Message.error(this.$t(1590008))
                                        return false
                                    }
                                    let data = {
                                        taskId: params.row.taskId,
                                        actVal: e.target.value,
                                        targetVal: params.row.targetVal,
                                        addVal: params.row.addVal,
                                        remark: params.row.remark,
                                        InputType: 0
                                    }
                                    this.loading = true;
                                    axios
                                        .request({
                                            url: '/kpi/tasklist/UpdValue',
                                            data,
                                            method: 'post'
                                        })
                                        .then(res => {
                                            var that = this;
                                            setTimeout(function () {
                                                if (res.data.ret === 1) {
                                                    that.$Message.success(that.$t(90000054))
                                                } else {
                                                    that.$Message.error(that.$t(res.data.msg))
                                                }
                                                that.loading = false;
                                            }, 1000);
                                        })
                                }
                            }
                        })
                    }
                },
                {
                    title: this.$t(90000053),
                    key: 'addVal',
                    align: 'center',
                    render: (h, params) => {
                        return h('Input', {
                            props: {
                                size: 'small',
                                value: params.row.addVal,
                                disabled: params.row.enable === 0
                            },
                            on: {
                                'on-blur': e => {
                                    if (e.target.value === '' || e.target.value == null) {
                                        return false
                                    }
                                    if (isNaN(e.target.value)) {
                                        this.$Message.error(this.$t(1590008))
                                        return false
                                    }
                                    let data = {
                                        taskId: params.row.taskId,
                                        actVal: params.row.trueVal,
                                        targetVal: params.row.targetVal,
                                        addVal: e.target.value,
                                        remark: params.row.remark,
                                        InputType: 3
                                    }
                                    this.loading = true;
                                    axios
                                        .request({
                                            url: '/kpi/tasklist/UpdValue',
                                            data,
                                            method: 'post'
                                        })
                                        .then(res => {
                                            var that = this;
                                            setTimeout(function () {
                                                if (res.data.ret === 1) {
                                                    that.$Message.success(that.$t(90000054))
                                                } else {
                                                    that.$Message.error(that.$t(res.data.msg))
                                                }
                                                that.loading = false;
                                            }, 1000);
                                        })
                                }
                            }
                        })
                    }
                },
                {
                    title: this.$t(1030),
                    key: 'remark',
                    align: 'center',
                    render: (h, params) => {
                        return h('Input', {
                            props: {
                                size: 'small',
                                value: params.row.remark,
                                disabled: params.row.enable === 0
                            },
                            on: {
                                'on-blur': e => {
                                    if (e.target.value === '' || e.target.value == null) {
                                        return false
                                    }
                                    let data = {
                                        taskId: params.row.taskId,
                                        actVal: params.row.trueVal,
                                        targetVal: params.row.targetVal,
                                        addVal: params.row.addVal,
                                        remark: e.target.value,
                                        InputType: 1
                                    }
                                    this.loading = true;
                                    axios
                                        .request({
                                            url: '/kpi/tasklist/UpdValue',
                                            data,
                                            method: 'post'
                                        })
                                        .then(res => {
                                            var that = this;
                                            setTimeout(function () {
                                                if (res.data.ret === 1) {
                                                    that.$Message.success(that.$t(90000054))
                                                } else {
                                                    that.$Message.error(that.$t(res.data.msg))
                                                }
                                                that.loading = false;
                                            }, 1000);
                                        })
                                }
                            }
                        })
                    }
                }
            ],
            total: 0,
            page: 1,
            pagesize: 10,
            defaultDepart: 0,
            year: '', // 开始年份 最近5年
            year2: '', // 结束年份
            year3: '', // 开始季度年 最近两年的季度
            year4: '', // 结束季度年
            quarter: 0, // 开始季度
            quarter1: 0, // 结束季度
            month: '', // 开始月份
            month2: '', // 结束月份
            week: '',
            day: '',
            depart: 0,
            cycleList: [],
            itemId: 0 // 指标+周期 id
        }
    },
    created () {
        axios
            .request({
                url: '/config/ProjectSection/GetCurrentDepart',
                method: 'get'
            })
            .then(res => {
                if (res.data.ret === 1) {
                    // console.log(res.data);
                    this.defaultDepart = res.data.data.id
                }
            })
        this.getkpiList()
    },
    methods: {
        getkpiList () {
            axios
                .request({
                    url: '/kpi/Item/GetItemTree?section=0',
                    method: 'get'
                })
                .then(res => {
                    // this.departList = [];
                    this.data1 = res.data.data
                    // console.log(this.data1);
                    this.data1.forEach(ele => {
                        ele.expand = true
                    })
                })
        },
        getCycle () {
            this.changeIndex = 100
            // console.log(this.$refs.tree.getSelectedNodes());
            let arr = this.$refs.tree.getSelectedNodes()
            if (arr.length > 0) {
                this.kpiCycle = arr[0].cycle
                this.tableData = []
                this.depart = arr[0].id
                this.getCycleList(arr[0].id, arr[0].title)
                // this.$refs.year1.handleClear();
                // this.$refs.year2.handleClear();
                // this.$refs.year3.handleClear();
                // this.$refs.year4.handleClear();
                // this.$refs.month1.handleClear();
                // this.$refs.month2.handleClear();
                // this.$refs.week.handleClear();
                // this.$refs.day.handleClear();
                // 最近30天
                var date = new Date()
                this.day = [moment(date.getTime() - 3600 * 1000 * 24 * 30).format('YYYY-MM-DD'), moment(date.getTime()).format('YYYY-MM-DD')]
                // 最近16周
                this.week = [moment(date.getTime() - 3600 * 1000 * 24 * 7 * 16).format('YYYY-MM-DD'), moment(date.getTime()).format('YYYY-MM-DD')]
                // 最近12个月
                this.month = moment(date.getTime() - 3600 * 1000 * 24 * 30 * 12).format('YYYY-MM')
                this.month2 = moment(date.getTime()).format('YYYY-MM')
                // 最近两年的季度
                this.year3 = moment(date.getTime() - 3600 * 1000 * 24 * 30 * 12 * 2).format('YYYY')
                this.year4 = moment(date.getTime()).format('YYYY')
                // 最近5年
                this.year = moment(date.getTime() - 3600 * 1000 * 24 * 30 * 12 * 5).format('YYYY')
                this.year2 = moment(date.getTime()).format('YYYY')

                this.quarter = '1'
                this.quarter1 = '1'
            }
        },
        getCycleList (id, title) {
            // /kpi/Item/GetCycle
            let data = {
                section: id,
                itemName: title
            }
            axios
                .request({
                    url: '/kpi/Item/GetCycle',
                    data,
                    method: 'post'
                })
                .then(res => {
                    // this.departList = [];
                    // this.data1 = res.data.data;
                    // console.log(res.data.data);
                    if (res.data.ret == 1) {
                        this.cycleList = res.data.data
                        this.kpiCycle = this.cycleList[0].cycle
                        this.itemId = this.cycleList[0].id
                        if (this.cycleList.length == 1) {
                            this.changeIndex = 0
                        }
                        this.changeDatepick(0)
                    }
                })
        },
        changeDatepick (i) {
            this.changeIndex = i
            this.kpiCycle = this.cycleList[i].cycle
            this.itemId = this.cycleList[i].id
            this.search()
        },
        getYear (e) {
            this.year = e
        },
        getYear2 (e) {
            this.year2 = e
        },
        getQar (e) {
            this.year3 = e
        },
        getQar2 (e) {
            this.year4 = e
        },
        getMonth (e) {
            this.month = e
        },
        getMonth2 (e) {
            this.month2 = e
        },
        getWeek (e) {
            this.week = e
        },
        getDay (e) {
            this.day = e
        },
        search () {
            let begin = '',
                end = ''
            this.tableData = []
            if (this.kpiCycle == 1) {
                if (this.year === '' || this.year2 === '') {
                    this.$Message.error(this.$t('400034'))
                    return false
                }
                begin = moment(this.year).format('YYYY')
                end = moment(this.year2).format('YYYY')
            }
            if (this.kpiCycle == 2) {
                if (
                    this.year3 === '' ||
          this.year4 === '' ||
          this.quarter === '' ||
          this.quarter1 === ''
                ) {
                    this.$Message.error(this.$t('400034'))
                    return false
                }
                begin = moment(this.year3).format('YYYY') + '-' + this.quarter
                end = moment(this.year4).format('YYYY') + '-' + this.quarter1
            }
            if (this.kpiCycle == 3) {
                if (
                    this.month === '' ||
          this.month2 === '' ||
          this.month === undefined ||
          this.month2 === undefined
                ) {
                    this.$Message.error(this.$t('400034'))
                    return false
                }
                begin = moment(this.month).format('YYYY-MM')
                end = moment(this.month2).format('YYYY-MM')
            }
            if (this.kpiCycle == 4) {
                if (this.week[0] === undefined || this.week[1] === undefined) {
                    this.$Message.error(this.$t('400034'))
                    return false
                }
                begin = this.week[0]
                end = this.week[1]
            }
            if (this.kpiCycle == 5) {
                begin = this.day[0]
                end = this.day[1]
            }
            let data = {
                Section: this.depart,
                ItemId: this.itemId,
                BeginDate: begin,
                EndDate: end,
                page: this.page,
                pagesize: this.pagesize
            }
            // console.log(data);

            if (data.BeginDate === '' || data.BeginDate === null) {
                this.$Message.error(this.$t('400034'))
                return false
            }
            axios
                .request({
                    url: '/kpi/tasklist/GetlistByItem',
                    data,
                    method: 'post'
                })
                .then(res => {
                    // console.log(res.data);

                    if (res.data.ret === 1) {
                        // this.tableData = res.data.data;
                        let arr = res.data.data
                        console.log(arr)
                        this.total = arr.total
                        for (let i = 0; i < arr.data.length; i++) {
                            let obj = {}
                            obj.order = i + 1
                            obj.taskId = arr.data[i].taskId
                            obj.date = arr.data[i].title
                            obj.targetVal = arr.data[i].targetVal
                            obj.trueVal = arr.data[i].actVal
                            obj.remark = arr.data[i].remark
                            obj.enable = arr.data[i].enable
                            obj.addVal = arr.data[i].addVal
                            this.tableData.push(obj)
                        }
                        console.log(this.tableData)
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        downexcel () {
            var params = {
                section: this.depart,
                item: this.kpiIndex
            }
            axios
                .request({
                    url: '/kpi/item/ExportAll',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        window.location.href = axios.publicPath + '' + res.data.data
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        handleRowChange () {},
        changePage (value) {
            this.page = value
            console.log(this.page, this.pagesize)
            this.search()
        },
        handlePageSize (value) {
            this.pagesize = value
            this.search()
        }
    }
}
</script>
<style lang="less" scoped>

.dataManage {
  width: 100%;
  height: 100%;
  margin-left: 20px;
  overflow: auto;
}
.filter .divSearch {
  width: 160px;
}
.bodyModal {
  height: 350px;
}
.bodyModal .filter {
  label {
    display: inline-block;
    width: 120px;
  }
}
.bodyModal .modal-input-select {
  width: 200px;
}

.bodyModal .filter .iClass {
  color: red;
  display: inline-block;
  width: 8px;
}
.tabWrap {
  width: 100%;
  height: 30px;
  display: flex;
  padding-left: 20px;
  margin-bottom:10px;
  .active {
    background-color: #d5e8fc;
  }
}
.tab {
  width: 50px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  background-color: #f5f5f5;
  border-radius: 5px;
  margin-right: 10px;
  cursor: pointer;
}
</style>
