<template>
  <div class="testdiv">
    <!-- 按钮 -->
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div class="searchBtn">
        <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 intervalRight" icon="md-close-circle" @click="del">{{$t('1004')}}</Button>
        <Button type="primary" class="fourWord" icon="ios-create-outline" @click="handlepower">{{$t('101091')}}</Button>
      </div>
    </div>
    <!-- 数据展示 -->
    <div class="divborder newTableDiv">
      <Table
        class="tableClass"
        @on-current-change="handleRowChange"
        highlight-row
        :data="tableData"
        :columns="tableColumns"
      ></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>
    <!-- 添加 -->
    <Modal v-model="addmodal" :styles="{width:'530px'}" class="newModalClass">
        <p slot="header">
            <span v-if="type===1">{{$t('1002')}}</span>
            <span v-if="type===2">{{$t('1003')}}</span>
        </p>
      <div class="modal_body">
          <div class="filter">
            <label id="项目类型名称"><i >*</i>{{$t("600547")}}：
              </label>
            <Input
              v-model="addobj.name"
              class="searchInput MaxWidth"
              type="text"
              id="input1"
            />
          </div>
          <div class="filter" style="display:flex;margin-bottom: 40px;">
            <label id="项目描述"><i >*</i>{{$t("600540")}}：</label>
            <Input
            type="textarea"
              v-model="addobj.description"
              class="searchInput MaxWidth"
              :autosize="{minRows: 2,maxRows: 2}"
            />
          </div>
          <div class="filter">
            <label id="标签"><i >*</i>{{$t("600548")}}：</label>
            <Input
              v-model="addobj.flag"
              class="searchInput MaxWidth"
              type="text"
              id="input1"
            />
          </div>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="cancle" v-text="$t(1033)">取消</Button>
        <Button type="primary" v-if="type===1" size="large" @click="adddata(1)">{{$t('1002')}}</Button>
        <Button type="primary" v-if="type===2" size="large" @click="adddata(2)">{{$t('1003')}}</Button>
      </div>
    </Modal>
    <!-- 设置权限 -->
    <Modal
      :title="title1"
      v-model="settingmodal"
      :styles="{width:'600px'}"
       class="newModalClass"
    >
      <div class="modal_body">
        <div style="width:560px;height:300px;padding-left:0px;overflow-y: auto;">
          <Tree :data="powerdata" show-checkbox multiple ref="tree"></Tree>
        </div>
      </div>
      <div slot="footer">
        <Button type="text" size="large" @click="cancle" v-text="$t(1033)">取消</Button>
        <Button type="primary" size="large" @click="savepower" v-text="$t(900552)">确认</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
export default {
    data () {
        return {
            title1: this.$t('101091'),
            addmodal: false,
            settingmodal: false,
            total: 0,
            page: 1,
            pagesize: 10,
            powerdata: [],
            obj: {},
            addobj: {},
            levelList: [],
            tableData: [],
            type: 0,
            tableColumns: [
                {
                    type: 'index2',
                    title: this.$t('1008'),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        )
                    },
                    width: 60
                },
                {
                    title: this.$t('600547'),
                    key: 'name',
                    width: 250
                },
                {
                    title: this.$t('100044'),
                    key: 'description'
                },
                {
                    title: this.$t('600548'),
                    key: 'flag'
                }
            ]
        }
    },
    created () {
        this.search()
        // 格式化表格样式
        this.tableColumns = this.$time.initTableTitle(this.tableColumns)
    },
    methods: {
        initTableData (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        name: item.name,
                        description: item.description,
                        flag: item.flag,
                        id: item.id
                    })
                }
            })
            this.tableData = data
        },
        handdlesearch () {
            this.page = 1
            this.search()
        },
        search () {
            var params = { page: this.page, pageSize: this.pagesize }
            axios
                .request({
                    url: '/config/ProjectType/GetProjectTypeLists',
                    params,
                    methods: 'get'
                })
                .then(res => {
                    this.total = res.data.total
                    this.initTableData(res.data.data)
                })
        },
        add () {
            this.type = 1
            this.addobj = {}
            this.addmodal = true
        },
        edit () {
            if (JSON.stringify(this.obj) === '{}') {
                this.$Message.error(this.$t(1043))
                return false
            }
            var params = { id: this.obj.id }
            console.log(this.obj.parentid)
            this.addobj.parentid = this.obj.parentid
            axios
                .request({
                    url: '/config/ProjectType/getProjectTypeInfoOne',
                    params,
                    methods: 'get'
                })
                .then(res => {
                    this.addobj = res.data.data
                })
            this.addmodal = true
            this.type = 2
        },
        adddata (type) {
            let data = this.addobj
            if (data.flag == undefined) {
                this.$Message.error(this.$t('9000136'))
                return
            }
            // 添加
            if (type === 1) {
                axios
                    .request({
                        url: '/config/ProjectType/AddProjectType',
                        data,
                        method: 'post'
                    })
                    .then(res => {
                        if (res.data.ret === 1) {
                            this.$Message.success(this.$t(1055))
                            this.page = 1
                            this.search()
                            this.addmodal = false
                        } else {
                            this.$Message.error(this.$t(res.data.msg))
                            this.search()
                        }
                    })
                // 修改
            } else if (type === 2) {
                axios
                    .request({
                        url: '/config/ProjectType/EditProjectType',
                        data,
                        method: 'post'
                    })
                    .then(res => {
                        if (res.data.ret === 1) {
                            this.$Message.success(this.$t(1060))
                            this.page = 1
                            this.search()
                            this.addmodal = false
                        } else {
                            this.$Message.error(this.$t(res.data.msg))
                            this.search()
                        }
                    })
            }
        },
        del () {
            if (JSON.stringify(this.obj) === '{}') {
                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: () => {
                        var params = { id: this.obj.id }
                        axios
                            .request({
                                url: '/config/ProjectType/DeleteProjectType',
                                params,
                                method: 'post'
                            })
                            .then(res => {
                                if (res.data.ret === 1) {
                                    this.$Message.success(this.$t('1058'))
                                    this.page = 1
                                    this.search()
                                } else {
                                    this.$Message.error(this.$t(res.data.msg))
                                    this.search()
                                }
                            })
                    }
                })
            }
        },
        cancle () {
            this.addobj = {}
            this.addmodal = false
            this.settingmodal = false
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow
        },
        handlePageSize (value) {
            this.pagesize = value
            this.tableData = this.search()
        },
        changePage (value) {
            this.page = value
            this.tableData = this.search()
        },
        handlepower () {
            this.powerdata = []
            if (JSON.stringify(this.obj) === '{}') {
                this.$Message.error(this.$t(1043))
                return false
            }
            var params = { roleid: this.obj.id }
            axios
                .request({
                    url: '/config/UserRole/getProjectTypeRoleMaintenanceListEx',
                    params,
                    method: 'get'
                })
                .then(res => {
                    this.settingmodal = true
                    let data = res.data.data
                    data.forEach(item => {
                        let data = {}
                        data.id = item.id
                        data.title = this.$t(item.title)
                        data.expand = item.expand
                        data.checked = item.checked
                        data.children = this.getchildren(item)
                        this.powerdata.push(data)
                    })
                })
        },
        savepower () {
            let per = this.$refs.tree.getCheckedAndIndeterminateNodes()
            let permissions = []
            per.forEach(item => permissions.push(item.id))
            var data = { roleid: this.obj.id, permissions: permissions }
            axios
                .request({
                    url: '/config/UserRole/setProjectTypeRoleMaintenance',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.$Message.success(this.$t(1))
                        this.settingmodal = false
                        this.page = 1
                        this.search()
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                        this.search()
                    }
                })
        },
        getchildren (item) {
            let arry = []
            if (item.children != [] && item.children.length > 0) {
                item.children.forEach(child => {
                    let data = {}
                    data.id = child.id
                    data.title = this.$t(child.title)
                    data.expand = child.expand
                    data.checked = child.checked
                    data.children = this.getchildren(child)
                    arry.push(data)
                })
            }
            return arry
        }
    }
}
</script>
<style lang="less" scoped>

</style>
