<template>
  <div class="report_permission">
    <div class="top center"><span v-text="$t('200045')">设置各上报层级岗位</span></div>
    <div class="body" >
      <ul>
        <li>
          <Row type="flex" :gutter="5" justify="space-between" class="code-row-bg">
            <Col span="4">
            <span class="level" v-text="$t('200025')">等级1</span>
            </Col>
            <Col span="20">
            <span class="selectedPost" v-for="item in selectedPosts.level1">{{item.title}}</span>
            <Button @click="showModal(1)" type="primary" icon="md-add" size="small" style="margin: 2px 0;"></Button>
            </Col>
          </Row>
        </li>
        <li class="li1">
          <span class="downArrow">
            <Icon type="md-arrow-down" />
          </span>
        </li>
        <li>
          <Row type="flex" :gutter="5" justify="space-between" class="code-row-bg">
            <Col span="4">
            <span class="level" v-text="$t('200029')">等级2</span>
            </Col>
            <Col span="20">
            <span class="selectedPost" v-for="item in selectedPosts.level2">{{item.title}}</span>
            <Button @click="showModal(2)" type="primary" icon="md-add" size="small" style="margin: 2px 0;"></Button>
            </Col>
          </Row>
        </li>
        <li class="li1">
          <span class="downArrow">
            <Icon type="md-arrow-down" />
          </span>
        </li>
        <li>
          <Row type="flex" :gutter="5" justify="space-between" class="code-row-bg">
            <Col span="4">
            <span class="level" v-text="$t('200043')">等级3</span>
            </Col>
            <Col span="20">
            <span class="selectedPost" v-for="item in selectedPosts.level3">{{item.title}}</span>
            <Button @click="showModal(3)" type="primary" icon="md-add" size="small" style="margin: 2px 0;"></Button>
            </Col>
          </Row>
        </li>
        <li class="li1">
          <span class="downArrow">
            <Icon type="md-arrow-down" />
          </span>
        </li>
        <li>
          <Row type="flex" :gutter="5" justify="space-between" class="code-row-bg">
            <Col span="4">
            <span class="level" v-text="$t('200044')">等级4</span>
            </Col>
            <Col span="20">
            <span class="selectedPost" v-for="item in selectedPosts.level4">{{item.title}}</span>
            <Button @click="showModal(4)" type="primary" icon="md-add" size="small" style="margin: 2px 0;"></Button>
            </Col>
          </Row>
        </li>
      </ul>
    </div>

    <Modal :title="$t('200046')" v-model="selectPostModal" @on-ok="selectOk" :loading="loading" :styles="{top: '40px',width:'600px'}">
      <div class="modal_body" style="width:100%!important;padding:0 20px;">
        <CheckboxGroup v-model="tempPosts">
          <ul v-for="parent in posts">
            <li><span class="fs15">{{parent.title}}</span></li>
            <li class="mb15 pl10">
              <Checkbox v-for="item in parent.children" :key="item.groupID" :label="item.groupID"> <span>{{item.groupTitle}}</span></Checkbox>
            </li>
          </ul>
        </CheckboxGroup>
      </div>
    </Modal>
  </div>
</template>

<script>
import axios from '@/libs/api.request'
export default {
    name: 'report-permission',
    props: ['reportConfig'],
    data () {
        return {
            // reportConfig: {
            //   machineLevel: 1, //1-普通设备,2-重点设备,3-瓶颈设备,4-非生产设备
            //   title: '设置应急维修流程节点上报时间条件' //暂时没用，后续可能会用上
            // },
            selectedPosts: {
                level1: [],
                level2: [],
                level3: [],
                level4: []
            },
            formData: {
                level: 1, // 1,2,3,4
                mode: 1, // 1-AM，2-PM
                usergroup: []
            },
            tempPosts: [],
            posts: [],
            loading: false,
            selectPostModal: false
        }
    },
    created () {
        this.initData() // 获取选中值
        this.initPosts() // 获取岗位列表
    },
    methods: {
        initData () {
            let params = {
                mode: this.reportConfig.mode
            }
            this.formData.mode = this.reportConfig.mode
            axios.request({
                url: '/tpm/PlanReport/getSetLevel',
                params,
                method: 'get'
            }).then(res => {
                if (res.data.data != undefined && res.data.ret === 1) {
                    this.selectedPosts = res.data.data
                } else {
                    // 初始化formData
                    this.selectedPosts = {
                        level1: [],
                        level2: [],
                        level3: [],
                        level4: []
                    }
                }
            })
        },
        initPosts () {
            axios.request({
                url: '/config/ProjectUserGroup/ListSectionUsergroup',
                method: 'get'
            }).then(res => {
                if (res.data.data != undefined && res.data.ret === 1) {
                    this.posts = res.data.data
                } else {
                    // 初始化
                    this.posts = []
                }
            })
        },
        showModal (e) {
            this.selectPostModal = true
            this.formData.level = e
            // 加载已选择的数据
            let level_property = 'level' + e
            this.tempPosts = []
            this.selectedPosts[level_property].forEach(item => {
                this.tempPosts.push(item.usergroup_id)
            })
        },
        selectOk () {
            this.formData.usergroup = this.tempPosts
            let data = this.formData
            axios.request({
                url: '/tpm/PlanReport/SetLevel',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.initData()
                    this.selectPostModal = false
                } else {
                    this.clearLoading()
                    return false
                }
            })
        }

    }, // end methods
    watch: {
        'reportConfig.mode' (v) {
            this.initData()
        }
    }
}
</script>

<style>
  .report_permission {
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    height: 360px;
    background-color: white;
    overflow: scroll;
  }

  .report_permission .top span {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    padding: 0 10px;
    background-color: #347ab8;
    border-radius: 5px;
    font-size: 16px;
    color: white;
  }

  .report_permission .body .level {
    display: inline-block;
    height: 30px;
    line-height: 30px;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: center;
    background-color: #b7b7b7;
    font-size: 14px;
    color: #333;
    width: 70px;
  }

  .report_permission .body .selectedPost {
    display: inline-block;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    background-color: #eee;
    border: 1px solid #ddd;
    border-radius: 3px;
    text-align: center;
    margin-right: 10px;
    margin-bottom: 5px;
  }

  .report_permission .body .flow {
    padding: 0 8px;
    display: inline-block;
    font-size: 16px;
  }

  .report_permission .body {
    margin-top: 17px;
  }

  .report_permission .body .rightArrow {
    color: red;
    display: inline-block;
    font-size: 16px;
  }

  .report_permission .body .downArrow {
    color: red;
    text-align: center;
    height: 30px;
    display: block;
    width: 70px;
    font-size: 16px;
  }

  .modal_body ul li {
    font-size: 14px;
    font-weight: 700;
  }
</style>
