<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv">
      <div class="filter">
        <label>{{$t('100000')}}：</label>
        <Select class="searchSelect" v-model="depart" clearable @on-change="getkpiList1(depart)">
          <Option v-for="(item,key) in departList" :value="item.id" :key="key">{{ item.title }}</Option>
        </Select>
      </div>
      <div class="filter">
        <label>{{$t('950384')}}：</label>
        <Select class="searchSelect" v-model="kpiIndex" clearable >
          <Option v-for="(item,key) in kpiList" :value="item.title" :key="key">{{ item.title }}</Option>
        </Select>
      </div>
      <div class="searchBtn">
        <Button type="primary" class="twoWord" icon="ios-search" @click="search(page,pagesize)">{{$t('1001')}}</Button>
        <Button type="success" class="twoWord" icon="md-add-circle" @click="add()">{{$t('1002')}}</Button>
        <Button type="warning" class="twoWord" icon="ios-create-outline" @click="edit()">{{$t('1003')}}</Button>
        <Button type="error" class="twoWord" icon="md-close-circle" @click="del()">{{$t('1004')}}</Button>
      </div>
    </div>

    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData1"
        :columns="tableColumns1"
      ></Table>
      <div class="pageDiv">
        <div class="pageDirection">
          <Page
            :total="total"
            :current="page"
            @on-change="changePage"
            show-elevator
            show-sizer
            show-total
            @on-page-size-change="handlePageSize"
            :page-size-opts="[10,20,30,40,100]"
          ></Page>
        </div>
      </div>
    </div>

    <!-- 添加 start-->
    <Modal class="newModalClass" :title="addTitle" v-model="modalAdd" :styles="{width:'700px'}">
      <div class="bodyModel">
        <!-- <div class="divTop" v-text="$t('950385')">制定指标</div> -->
        <div class="partone">
          <div class="filter">
            <label><i>*</i>{{$t('100000')}}：</label>
            <Select v-model="depart1" clearable class="searchSelect">
              <Option v-for="(item,key) in departList" :value="item.id" :key="key">{{ item.title }}</Option>
            </Select>
          </div>
          <div class="filter" style="margin-left:100px;">
            <label><i>*</i>{{$t('950384')}}：</label>
            <Input v-model="kpiIndex1" placeholder class="searchInput" />
          </div>
        </div>
        <div class="partwo">
          <div class="" style="width:350px;">
            <label><i>*</i>{{$t(90000063)}}：</label>
            <CheckboxGroup v-model="kpiCycle" @on-change="checkCycle" style="width:350px!important;">
              <div class="filter">
                <Checkbox label="1">{{$t(1142)}}</Checkbox>
                <label><i>*</i>{{$t(950386)}}：</label>
                <Input v-model="val1" type="number" placeholder class="searchInput" />
              </div>
              <div class="filter">
                <Checkbox label="2">{{$t('1140')}}</Checkbox>
                <label><i>*</i>{{$t(950386)}}：</label>
                <Input v-model="val2" type="number" placeholder class="searchInput" />
              </div>
              <div class="filter">
                <Checkbox label="3">{{$t(1138)}}</Checkbox>
                <label><i>*</i>{{$t(950386)}}：</label>
                <Input v-model="val3" type="number" placeholder class="searchInput" />
              </div>
              <div class="filter">
                <Checkbox label="4">{{$t(1136)}}</Checkbox>
                <label><i>*</i>{{$t(950386)}}：</label>
                <Input v-model="val4" type="number" placeholder class="searchInput" />
              </div>
              <div class="filter">
                <Checkbox label="5">{{$t(900864)}}</Checkbox>
                <label><i>*</i>{{$t(950386)}}：</label>
                <Input v-model="val5" type="number" placeholder class="searchInput" />
              </div>
            </CheckboxGroup>
          </div>
          <div class="kpidetail">
            <div style="color:#2d8cf0;padding-left:32px" v-text="$t(90000064)">指标详情</div>
            <div class="filter">
              <label><i>*</i>{{$t('200017')}}：</label>
              <Input v-model="unit1" placeholder class="searchInput" />
            </div>
            <div class="filter">
              <label><i>*</i>{{$t(90000065)}}：</label>
              <Select v-model="judgementLogic1" label-in-value clearable class="searchSelect">
                <Option :value="0">{{$t('950388')}}</Option>
                <Option :value="1">{{$t('950389')}}</Option>
                <Option :value="2">{{$t('950470')}}</Option>
                <Option :value="3">{{$t('950471')}}</Option>
              </Select>
            </div>
            <div class="filter">
              <label >{{$t('200042')}}：</label>
              <Checkbox v-model="isUse1" style="width:50px;">{{$t('1000020')}}</Checkbox>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="modalAdd = false">{{$t('1033')}}</Button>
        <Button type="primary" size="large" @click="addPost">{{$t('1011')}}</Button>
      </div>
    </Modal>
    <!-- 添加 end-->

    <!-- 编辑 start-->
    <Modal class="newModalClass" :title="editTitle" v-model="modalEdit" :styles="{width:'700px'}">
      <div class="bodyModel">
        <!-- <div class="divTop" v-text="$t('950385')">制定指标</div> -->
        <div class="partone">
          <div class="filter">
            <label><i>*</i>{{$t('100000')}}：</label>
            <Select v-model="depart1" clearable disabled="disabled" class="searchSelect">
              <Option v-for="(item,key) in departList" :value="item.id" :key="key">{{ item.title }}</Option>
            </Select>
          </div>
          <div class="filter">
            <label><i>*</i>{{$t('950384')}}：</label>
            <Input v-model="kpiIndex1" placeholder class="searchInput"/>
          </div>
        </div>
        <!-- <div class="partwo"> -->
        <div class="filter">
          <label><i>*</i>{{$t(90000063)}}：</label>
          <RadioGroup v-model="kpiCycledit">
            <Radio label="1" disabled>{{$t(1142)}}</Radio>
            <Radio label="2" disabled>{{$t(1140)}}</Radio>
            <Radio label="3" disabled>{{$t(1138)}}</Radio>
            <Radio label="4" disabled>{{$t(1136)}}</Radio>
            <Radio label="5" disabled>{{$t(900864)}}</Radio>
          </RadioGroup>
        </div>
        <div class="filter">
          <label><i>*</i>{{$t(950386)}}：</label>
          <Input v-model="val" type="number" placeholder class="searchInput" />
        </div>
        <div class="kpidetail">
          <div style="color:#2d8cf0;padding-left:32px" v-text="$t(90000064)">指标详情</div>
          <div class="filter">
            <label><i>*</i>{{$t('200017')}}：</label>
            <Input v-model="unit1" placeholder class="searchInput" />
          </div>
          <div class="filter">
            <label><i>*</i>{{$t(90000065)}}：</label>
            <Select v-model="judgementLogic1" label-in-value clearable class="searchSelect">
              <Option :value="0">{{$t('950388')}}</Option>
              <Option :value="1">{{$t('950389')}}</Option>
              <Option :value="2">{{$t('950470')}}</Option>
              <Option :value="3">{{$t('950471')}}</Option>
            </Select>
          </div>
          <div class="filter">
            <label>{{$t('200042')}}：</label>
            <Checkbox v-model="isUse1" style="width:50px;">{{$t('1000020')}}</Checkbox>
          </div>
        </div>
        <!-- </div> -->
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="modalEdit = false">{{$t('1033')}}</Button>
        <Button type="primary" size="large" @click="editPost">{{$t('1011')}}</Button>
      </div>
    </Modal>
    <!-- 编辑 end-->
  </div>
</template>

<script>
import axios from '@/libs/api.request'
export default {
    // name: 'tree_select_page',
    components: {},
    data () {
        return {
            headers: {
                // 上传请求头添加
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            addTitle: this.$t(1002),
            editTitle: this.$t(1003),
            action:
        axios.publicPath + 'kpi/upload/UploadExcel?templateName=KpiTaskAct',
            tableData1: [], // 列表数据
            defaultDepart: 0, // 根据登录人的默认部门,举例是生产部门
            depart: 0,
            departList: [], // 部门列表
            kpiIndex: '', // kpi指标
            modalAdd: false, // 添加弹窗
            modalEdit: false, // 编辑弹窗
            depart1: '', // 添加-部门
            kpiIndex1: '', // 添加-kpi指标
            targetValue1: '', // 添加-目标值
            unit1: '', // 添加-单位
            judgementLogic1: 0, // 添加-判断逻辑
            kpiCycle: [],
            color1: '#F9C279', // 添加-颜色
            isUse1: false, // 添加-是否启用
            color2: '#F9C279', // 编辑-颜色
            divList: [], // 大屏位置
            current: 0, // 选中位置
            page: 1,
            pagesize: 10,
            total: 0,
            showtype: 1, // 模态框展示形式
            letter: '', // 字母下拉框value值
            letterlist: [], // 字母下拉框列表
            obj: {}, // 选中行
            tableColumns1: [
                {
                    type: 'index2',
                    title: this.$t(1008),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        )
                    },
                    width: 60,
                    align: 'center'
                },
                {
                    title: this.$t(100000),
                    key: 'depart',
                    align: 'center'
                },
                {
                    title: this.$t(950384),
                    key: 'kpiValue',
                    align: 'center'
                },
                {
                    title: this.$t(90000063),
                    key: 'kpiCycle',
                    align: 'center'
                },
                {
                    title: this.$t(950386),
                    key: 'targetValue',
                    align: 'center'
                },
                {
                    title: this.$t(200017),
                    key: 'unit',
                    align: 'center'
                },
                {
                    title: this.$t(90000073),
                    key: 'judgementLogic',
                    align: 'center'
                },
                {
                    title: this.$t(200042),
                    key: 'isUse',
                    align: 'center'
                },
                {
                    title: this.$t(920139),
                    key: 'username',
                    align: 'center'
                },
                {
                    title: this.$t(920138),
                    key: 'time',
                    align: 'center'
                }
            ],
            val: 0,
            val1: 0,
            val2: 0,
            val3: 0,
            val4: 0,
            val5: 0,
            kpiCycledit: 0,
            typeList: [],
            cycle: [],
            disabled: false,
            kpiList: []
        }
    },
    created () {
        this.getDepartList() // 获取部门
        // this.getletterlist()//获取字母
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
        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.depart = this.defaultDepart
                    this.getkpiList1(this.depart)
                    this.search(this.page, this.pagesize)
                }
            })
    },
    methods: {
    // 获取部门
        getDepartList () {
            axios
                .request({
                    url: '/config/ProjectUser/getUserDepartment',
                    method: 'get'
                })
                .then(res => {
                    this.departList = []
                    if (res.data.ret === 1) {
                        if (res.data.data.length !== 0) {
                            this.departList = res.data.data
                        }
                    }
                })
        },
        getkpiList1 (section) {
            axios
                .request({
                    url: '/kpi/ItemDisplay/GetItem?section=' + section,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        // console.log(res.data.data);
                        this.kpiList = res.data.data
                    }
                })
        },
        getletterlist () {
            axios
                .request({
                    url: '/kpi/ItemDisplay/Getletter',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        if (res.data.data.length > 0) {
                            this.letterlist = res.data.data
                        } else {
                            this.letterlist = []
                        }
                    }
                })
        },
        search (page, pagesize) {
            var params = {
                section: this.depart,
                item: this.kpiIndex,
                pagesize: this.pagesize,
                page: this.page
            }
            axios
                .request({
                    url: '/kpi/item/getitems',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.total = res.data.total
                        // this.defaultDepart = res.data.data[0].section;
                        console.log(res.data.data)
                        this.mockTableData1(res.data.data)
                    }
                })
        },
        // 渲染表格
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    var enable = item.enable === 1 ? this.$t(1000020) : this.$t(1000021)
                    var condition =
            item.condition === '0' ? this.$t(950388) : this.$t(950389)
                    data.push({
                        depart: item.department, // 部门
                        kpiValue: item.item, // kpi指标
                        kpiCyclenum: item.kpiCycle,
                        kpiCycle: item.kpiCycleDesc, // kpi周期
                        targetValue: item.targetVal, // 目标值
                        unit: item.unit, // 单位
                        judgementLogic: item.conditionDesc, // 判断逻辑
                        isUse: enable, // 是否启用
                        username: item.creater, // 维护人
                        time: item.createtime, // 维护时间
                        section: item.section, //
                        id: item.id,
                        judgementnum: parseInt(item.condition),
                        isUsenum: item.enable === 1,
                        showtype: item.showtype,
                        letter: item.letter
                    })
                }
            })
            this.tableData1 = data
        },
        checkCycle (data) {
            this.typeList = data
        },
        // 弹窗
        add () {
            // if (this.depart != this.defaultDepart) {
            //   this.$Message.error("暂无操作权限");
            //   return false;
            // }
            this.divList = []
            for (var i = 0; i < 12; i++) {
                var arr = {
                    section: '',
                    item: '',
                    position: i + 1,
                    color: '',
                    itemDesc: ''
                }
                this.divList.push(arr)
            }
            // 清除数据
            // this.depart1 = this.defaultDepart;
            this.depart1 = this.depart
            this.disabled = true
            this.kpiIndex1 = ''
            this.kpiCycle = []
            this.unit1 = ''
            this.judgementLogic1 = 0
            this.val1 = 0
            this.val2 = 0
            this.val3 = 0
            this.val4 = 0
            this.val5 = 0
            this.isUse1 = false
            this.modalAdd = true
        },
        // 根据部门获取大屏位置
        getDivList () {
            this.divList = []
            for (var i = 0; i < 12; i++) {
                var arr = {
                    section: '',
                    item: '',
                    position: i + 1,
                    color: '',
                    itemDesc: ''
                }
                this.divList.push(arr)
            }
            var params = {
                section: this.modalAdd ? this.depart1 : this.obj.section
            }
            axios
                .request({
                    url: '/kpi/item/GetItemBySection',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.data.length !== 0) {
                        this.divList.forEach(ele => {
                            res.data.data.forEach(v => {
                                if (ele.position === v.position) {
                                    ele.section = v.section
                                    ele.item = v.item
                                    ele.position = v.position
                                    ele.color = v.color
                                    ele.itemDesc = v.itemDesc
                                }
                            })
                        })
                    }
                })
        },
        addClass: function (index) {
            this.current = index
        },
        // 添加-提交
        addPost () {
            if (this.depart1 == 0) {
                this.$Message.error(this.$t(100239))
                return false
            }
            //  表单验证
            if (this.kpiIndex1 == '') {
                this.$Message.error(this.$t(90000074))
                return false
            }
            if (this.kpiCycle.length == 0) {
                this.$Message.error(this.$t(90000075))
                return false
            }
            if (this.unit1 == '') {
                this.$Message.error(this.$t(800033))
                return false
            }
            if (this.judgementLogic1 == undefined) {
                this.$Message.error(this.$t(90000076))
                return false
            }

            if (this.kpiCycle.length > 0) {
            }
            this.cycle = []
            for (let i = 0; i < this.kpiCycle.length; i++) {
                let kpiobj = {
                    KpiCycle: 0,
                    TargetVal: 0
                }
                kpiobj.KpiCycle = parseInt(this.kpiCycle[i])
                // if (this.kpiCycle[i] == 1) {
                //   kpiobj.TargetVal = this.val1;
                // }
                this.cycle.push(kpiobj)
            }

            // console.log(this.cycle);
            for (let i = 0; i < this.cycle.length; i++) {
                if (this.cycle[i].KpiCycle == 1) {
                    this.cycle[i].TargetVal = this.val1
                }
                if (this.cycle[i].KpiCycle == 2) {
                    this.cycle[i].TargetVal = this.val2
                }
                if (this.cycle[i].KpiCycle == 3) {
                    this.cycle[i].TargetVal = this.val3
                }
                if (this.cycle[i].KpiCycle == 4) {
                    this.cycle[i].TargetVal = this.val4
                }
                if (this.cycle[i].KpiCycle == 5) {
                    this.cycle[i].TargetVal = this.val5
                }
            }
            console.log(this.cycle)

            var data = {
                section: this.depart1,
                item: this.kpiIndex1,
                Unit: this.unit1,
                condition: this.judgementLogic1,
                // position: 1,
                Enable: this.isUse1 ? 1 : 0,
                Cycle: this.cycle,
                showtype: this.showtype,
                letter: this.showtype === 1 ? '' : this.letter
            }
            // console.log(data);
            axios
                .request({
                    url: '/kpi/item/Add',
                    data,
                    method: 'post'
                })
                .then(res => {
                    // console.log(res.data);
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t('1055'))
                        this.search(this.page, this.pagesize)
                        this.modalAdd = false
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        // 编辑
        edit () {
            // if (this.obj.section != this.defaultDepart) {
            //   this.$Message.error("暂无操作权限");
            //   return false;
            // } else
            if (this.obj.id === '' || this.obj.id === undefined) {
                this.$Message.error(this.$t('1017'))
                return false
            } else {
                this.modalEdit = true
                this.depart1 = this.obj.section
                this.disabled = true
                this.kpiIndex1 = this.obj.kpiValue
                this.unit1 = this.obj.unit
                this.judgementLogic1 = this.obj.judgementnum
                this.isUse1 = this.obj.isUsenum
                let kpiCyclenum = this.obj.kpiCyclenum
                this.kpiCycledit = kpiCyclenum.toString()

                this.val = this.obj.targetValue

                // this.kpiCycle = this.kpiCycle;
            }
        },
        // 编辑提交
        editPost () {
            var data = {
                id: this.obj.id,
                section: this.obj.section,
                item: this.kpiIndex1,
                kpiCycle: this.kpiCycledit,
                TargetVal: this.val,
                Unit: this.unit1,
                condition: this.judgementLogic1,
                Enable: this.isUse1 ? 1 : 0,
                showtype: this.obj.showtype,
                letter: this.obj.showtype === 1 ? '' : this.obj.letter
            }
            axios
                .request({
                    url: '/kpi/item/Modify',
                    data,
                    method: 'post'
                })
                .then(res => {
                    console.log(res.data)
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t('1060'))
                        this.search(this.page, this.pagesize)
                        this.modalEdit = false
                        this.obj = {}
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        // 删除
        del () {
            if (this.obj.id === '' || this.obj.id === undefined) {
                this.$Message.error(this.$t('1017'))
                return false
            } else {
                this.$Modal.confirm({
                    title: this.$t('1018'),
                    content: '',
                    width: '290px',
                    closable: true,
                    okText: this.$t('1004'),
                    onOk: () => {
                        axios.request({
                            url: '/kpi/item/Delete?id=' + this.obj.id,
                            method: 'get'
                        }).then(res => {
                            if (res.data.ret === 1) {
                                this.$Message.success(this.$t('1058'))
                                this.search(1, this.pagesize)
                            } else {
                                this.$Message.error(this.$t('1000041'))
                            }
                        })
                    }
                })
            }
        },
        // 下载模板
        loadexcel () {
            axios
                .request({
                    url: '/config/download/GetTemplate?name=KpiItem',
                    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))
                    }
                })
        },
        // 导出
        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))
                    }
                })
        },
        handleFormatError (file) {
            this.$Message.error(this.$t(950402) + file.name + this.$t(950397))
        },
        handleSuccess (res, file) {
            // 导入成功函数
            if (res.ret === 1) {
                this.$Message.success(this.$t(950398))
            } else {
                this.$Message.error(this.$t(res.msg))
            }
        },
        handleError () {
            // 导入失败函数
            this.$Message.error(this.$t(950399))
        },

        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow // 选中行
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData1 = this.search(this.page, this.pagesize)
        },
        changePage (value) {
            this.page = value
            this.tableData1 = this.search(this.page, this.pagesize)
        },

        // 时间戳转换成时间
        timestampToTime (timeStampe) {
            var date = new Date(timeStampe) // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-'
            var M =
        (date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1)
            : date.getMonth() + 1) + '-'
            var D =
        (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
            var h =
        (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
            var m =
        (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) +
        ':'
            var s =
        date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
            return Y + M + D + h + m + s
        }
    }
}
</script>
<style lang="less" scoped>
.testdiv {
  width: 100%;
  height: 100%;
}

.bodyModel {
  height: 330px;
  padding-right:40px;
}
.bodyModel .divLeft {
  border: 1px solid #ddd;
  width: 300px;
  float: left;
}
.bodyModel .divTop {
  border-bottom: 1px solid #ddd;
  height: 50px;
  color: #2d8cf0;
  line-height: 50px;
  padding: 0px 10px;
}
.bodyModel .leftMiddle {
  border-bottom: 1px solid #ddd;
  height: 100px;
  padding: 10px;
}
.bodyModel .leftButtom {
  height: 245px;
  padding: 10px;
}
.bodyModel .divRight {
  border: 1px solid #ddd;
  width: 465px;
  float: left;
  padding: 0;
}
.bodyModel .rightTop {
  padding: 3px;
}
.bodyModel .filter {
  label {
    display: inline-block;
    width: 85px;
  }
}
.bodyModel .filter .iClass {
  color: red;
  display: inline-block;
  width: 8px;
}
.bodyModel .filter .ivu-input-small {
  width: 135px;
}
.bodyModel .divRight .divScreen {
  width: 114px;
  height: 114px;
  border: 1px solid #ddd;
  float: left;
  cursor: pointer;
  color: #fff;
  text-align: center;
  line-height: 114px;
}
.bodyModel .divRight .isActive {
  border: 3px solid #2d8cf0;
}
.partone,
.partwo {
  display: flex;
}
.partone {
  height: 70px;
  align-items: center;
}
.kpidetail {
  display: flex;
  flex-direction: column;
}
.ivu-checkbox-group {
  display: flex;
  flex-direction: column;
  text-align: left;
}
</style>
