<template>
  <div class="testdiv">
    <div class="divborder newSearchDiv" style="margin:0px;">
      <div>
        <div class="filter">
          <label>{{$t('100044')}}：</label>
          <Input class="searchInput" type="text" v-model="name" />
        </div>
        <div>
          <div class="searchBtn">
            <Button type="primary" class="twoWord intervalRight" icon="ios-search" @click="search(1,10)">{{$t('1001')}}</Button>
            <Button type="success" class="fourWord" icon="ios-build" @click="add()">{{$t('950167')}}</Button>
          </div>
        </div>
        <Modal
           class="newModalClass"
          :title="$t(950167)"
          v-model="addmodal"
          :styles="{width:'550px'}"
          @on-ok="commitAdd"
        >
          <div class="filter">
            <label>{{$t('950169')}}：</label>
            <Select
              v-model="project"
              label-in-value
              @on-change="projectChange"
              clearable
              class="searchSelect"
            >
              <Option v-for="item in projectLst" :value="item.id" :key="item.id">{{ item.title }}</Option>
            </Select>
          </div><br/>
          <div class="filter">
            <label>{{$t('950170')}}：</label>
            <Select
              v-model="dashboard"
              label-in-value
              clearable
              class="searchSelect MaxWidth nowropStyle"
              multiple
            >
              <Option v-for="item in dashboardLst" :value="item.id" :key="item.id">{{ item.title }}</Option>
            </Select>
          </div>
        </Modal>
      </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>
  </div>
</template>
<script>
import axios from '@/libs/api.request'
export default {
    name: 'Businessmanagement', // 组件不刷新
    data () {
        return {
            morecondition: false,
            addmodal: false,
            editmodal: false,
            name: '',
            project: '',
            projectLst: [],
            dashboard: [],
            dashboardLst: [],
            tableData1: [],
            total: 0,
            page: 1,
            pagesize: 10,
            detailobj: {},
            tableColumns1: [
                {
                    type: 'index2',
                    title: this.$t(1008),
                    key: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        )
                    },
                    width: '80px'
                },
                {
                    title: this.$t(300080),
                    key: 'page_title'
                },
                {
                    title: this.$t(100044),
                    key: 'description'
                },
                {
                    title: this.$t(950168),
                    key: 'page_code'
                }
            ]
        }
    },
    created () {
        this.search(1, 10)
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        search (page, pagesize) {
            var params = {
                page: page,
                pagesize: pagesize,
                name: this.name
            }
            axios
                .request({
                    url: '/config/DashboardSet/GetDashboardPages',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.total = res.data.total
                        this.mockTableData1(res.data.data)
                    }
                })

            this.detailobj = ''
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        page_title: item.page_title,
                        page_code: item.page_code,
                        description: item.description,
                        type: item.type,
                        page_patial_code: item.page_patial_code,
                        page_patial_condition_code: item.page_patial_condition_code
                    })
                }
            })
            this.tableData1 = data
        },
        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)
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.detailobj = currentRow
        },
        add () {
            this.addmodal = true
            this.initProject()
            this.initPagelst()
        },
        initProject () {
            axios
                .request({
                    url: 'config/Project/getProjectLists',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.projectLst = res.data.data
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        initPagelst () {
            axios
                .request({
                    url: 'config/DashboardSet/GetAllDashboardPages',
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.dashboardLst = res.data.data
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        projectChange () {
            let SelectedData = []
            var params = {
                projectId: this.project
            }
            axios
                .request({
                    url: 'config/DashboardSet/GetProjectDashboardPages',
                    params,
                    method: 'get'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        res.data.data.forEach(item => {
                            SelectedData.push(item.id)
                        })
                        this.dashboard = SelectedData
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        },
        commitAdd () {
            let ids = ''
            this.dashboard.forEach(item => {
                ids += item + ','
            })
            var data = {
                projectId: this.project,
                page_ids: ids
            }
            console.log(data)
            axios
                .request({
                    url: 'config/DashboardSet/SetProjectDashboardPages',
                    data,
                    method: 'post'
                })
                .then(res => {
                    if (res.data.ret === 1) {
                        this.dashboardLst = res.data.data
                        this.initProject()
                        this.initPagelst()
                        this.$Message.success(this.$t(1150))
                    } else {
                        this.$Message.error(this.$t(res.data.msg))
                    }
                })
        }
    }
}
</script>
<style lang="less" scoped>

</style>
