<template>
    <div class="testdiv">
      <div class="divborder newSearchDiv">
            <div class="filter">
                <label > {{$t('600009')}}：</label>
                <Input class="searchInput" type="text"  v-model="index_Program_number" />
            </div>
            <div class="filter">
                <label >{{$t('100088')}}：</label>
                <Select v-model="index_Program_name" label-in-value clearable filterable class="searchSelect">
                    <Option v-for="item in products1" :value="item.name" :key="item.id">{{ item.name }}</Option>
                </Select>
            </div>
            <div class="filter">
                <label> {{$t('700095')}}：</label>
                <Select v-model="index_audit_status" labe l-in-value  clearable class="searchSelect" >
                    <Option  :value="1" >待审核</Option>
                    <Option  :value="2" >已审核</Option>
                    <Option  :value="3" >被拒绝</Option>
                </Select>
            </div>
            <div class="searchBtn">
                <Button type="primary"  class="twoWord" icon="ios-search" @click="tosearch()" >查询</Button>
                <Button type="primary" class="twoWord" icon="md-add-circle" @click="audit()">审核</Button>
                <Button type="primary" class="twoWord" icon="md-download" @click="download()">下载</Button>
            </div>
      </div>
      <!-- 数据 -->
      <div class="divborder newTableDiv">
        <template>
          <Table  class="tableClass" ref="currentRowTable1" @on-expand="handleExpandChange" @on-current-change="handleRowChange" @on-selection-change="handleSelectRow" highlight-row :data="tableData1" :columns="tableColumns1">
            <template slot-scope="{ row, index }" slot="content">
                {{ row.content }}
            </template>
            <template slot-scope="{ row, index }" slot="xuhao">
                <span>{{ row.xuhao }}</span>
            </template>
            <template slot-scope="{ row, index }" slot="program_code">
                <span>{{ row.program_code }}</span>
            </template>
            <template slot-scope="{ row, index }" slot="productname">
                <span>{{ row.productname }}</span>
            </template>
            <template slot-scope="{ row, index }" slot="code">
                <span>{{ row.code }}</span>
            </template>
            <template slot-scope="{ row, index }" slot="file_name">
                <span>{{ row.file_name }}</span>
            </template>
            <template slot-scope="{ row, index }" slot="createname">
                <span>{{ row.createname }}</span>
            </template>
            <template slot-scope="{ row, index }" slot="createtime">
                <span>{{ row.createtime }}</span>
            </template>
            <template slot-scope="{ row, index }" slot="create_remark">
                <span>{{ row.create_remark }}</span>
            </template>
            <template slot-scope="{ row, index }" slot="checkname">
                <span>{{ row.checkname }}</span>
            </template>
            <template slot-scope="{ row, index }" slot="checktime">
                <span>{{ row.checktime }}</span>
            </template>
            <template slot-scope="{ row, index }" slot="checkinfo">
                <span v-if='row.checkinfo===1'>{{$t('700114')}}</span>
                <span v-if='row.checkinfo===2'>{{$t('700115')}}</span>
                <span v-if='row.checkinfo!==1&&row.checkinfo!==2'>NA</span>
            </template>
            <template slot-scope="{ row, index }" slot="check_remark">
                <span>{{ row.check_remark }}</span>
            </template>
            <template slot-scope="{ row, index }" slot="checkstatus">
                <span v-if='row.checkstatus===1' style='background-color:#FFDF25;'>{{$t('700096')}}</span>
                <span v-if='row.checkstatus===2' style='background-color:#00FF00;'>{{$t('700097')}}</span>
                <span v-if='row.checkstatus===3' style='background-color:#FF0000;'>{{$t('700098')}}</span>
            </template>
          </Table>
        </template>
        <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 class="newModalClass" :title='title1' v-model="editmodal" :styles="{width:'600px'}">
      <div class="modal_body" style="padding:0 0px;height:130px!important;">
          <div class="filter">
              <label id="desc">备注：</label>
              <Input
                type="textarea"
                v-model="remark"
                class="searchInput MaxWidth"
                :autosize="{minRows: 4,maxRows: 4}"
              />
          </div>
      </div>
      <div slot="footer" style="text-align:center">
        <Button type="text" size="large" @click="cancle">取消</Button>
        <Button type="primary" size="large" @click="auditprogram(2)">不通过</Button>
        <Button type="primary" size="large" @click="auditprogram(1)">通过</Button>
      </div>
    </Modal>
    </div>
</template>
<script>
import axios from '@/libs/api.request'
export default {
    data () {
        return {
            headers: {
                token: localStorage.getItem('token'),
                timestamp: localStorage.getItem('timestamp'),
                nonce: localStorage.getItem('nonce'),
                sign: localStorage.getItem('sign')
            },
            page: 1,
            pagesize: 10,
            total: 0,
            index_audit_status: '',
            index_Program_name: '',
            index_Program_number: '',
            tableData1: [],
            content: '',
            tableColumns1: [
                {
                    type: 'expand',
                    width: 40,
                    render: (h, params) => {
                        if (params.row.id === this.obj.id) {
                            var newArr = []
                            if (this.content !== null && this.content !== undefined && this.content !== '') {
                                var infoArray = this.content.split('\n')
                                infoArray.forEach((ele, i) => {
                                    newArr.push(
                                        h('p', [
                                            h('span', {
                                                style: { background: '#ddd', display: 'inline-block', 'text-align': 'center', padding: '0px 5px', 'min-width': '30px' }
                                            }, (i + 1)
                                            ),
                                            h('span', ele)
                                        ])
                                    )
                                })
                            }
                            return h('div', { style: { border: '1px solid black', overflow: 'auto', width: '99%', height: '200px' } },
                                [h('div', { style: { 'white-space': 'nowrap', 'max-width': '1000px' } }, newArr)]
                            )
                        }
                    }
                },
                {
                    type: 'selection',
                    slot: 'selection',
                    width: 60,
                    align: 'center'
                },
                {

                    title: '序号',
                    key: 'xuhao',
                    slot: 'xuhao',
                    render: (h, params) => {
                        return h(
                            'span',
                            params.index + (this.page - 1) * this.pagesize + 1
                        )
                    },
                    width: 90
                },
                {
                    title: '程序号',
                    key: 'program_code',
                    slot: 'program_code'
                },
                {
                    title: '产品名称',
                    key: 'productname',
                    slot: 'productname'
                },
                {
                    title: '产品图纸号',
                    key: 'code',
                    slot: 'code'
                },
                {
                    title: '文件名',
                    key: 'file_name',
                    slot: 'file_name'
                },
                {
                    title: '创建人',
                    key: 'createname',
                    slot: 'createname'
                },
                {
                    title: '创建时间',
                    key: 'createtime',
                    slot: 'createtime',
                    width: 148
                },
                {
                    title: '创建备注',
                    key: 'create_remark',
                    slot: 'create_remark'
                },
                {
                    title: '审核人',
                    key: 'checkname',
                    slot: 'checkname'
                },
                {
                    title: '审核时间',
                    key: 'checktime',
                    slot: 'checktime',
                    width: 148
                },
                {
                    title: '审核结果',
                    key: 'checkinfo',
                    slot: 'checkinfo'
                },
                {
                    title: '审核备注',
                    key: 'check_remark',
                    slot: 'check_remark'
                },
                {
                    title: '状态',
                    key: 'checkstatus',
                    slot: 'checkstatus'
                }
            ],
            products: [],
            products1: [],
            title1: '',
            editmodal: false,
            remark: '',
            show: false,
            selectids: [],
            obj: {}
        }
    },
    created () {
        this.getbtnpower()
        this.tosearch()
        this.getproduct()
        // 格式化表格样式
        this.tableColumns1 = this.$time.initTableTitle(this.tableColumns1)
    },
    methods: {
        audit () {
            if (this.selectids === undefined || this.selectids.length <= 0 || this.selectids === null) {
                this.$Message.error((this.$t('1017')))
                return false
            }
            var isAudited = false
            this.selectids.forEach(item => {
                if (item.checkstatus === 2 || item.checkstatus === '2') {
                    isAudited = true
                }
            })
            if (isAudited) {
                this.$Message.error((this.$t('9000398')))
                return false
            }
            this.remark = ''
            this.editmodal = true
        },
        auditprogram (type) {
            var data = {
                programids: this.selectids,
                check_remark: this.remark,
                num: type// 1通过，2不通过
            }
            axios.request({
                url: '/dnc/DncPgCreate/CheckProgramPosts',
                data,
                method: 'post'
            }).then(res => {
                if (res.data.ret === 1) {
                    this.$Message.success(this.$t('1064'))
                    this.remark = ''
                    this.editmodal = false
                    this.search(this.page, this.pagesize)
                } else {
                    this.$Message.error(this.$t(res.data.msg));
                }
            })
        },
        // 获得按钮权限
        getbtnpower () {
            axios.request({
                url: '/dnc/DncPgCreate/GetCheckbuttons',
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    var checkbt = res.data.data
                    if (checkbt.checkpower === 1 || checkbt.allpower === 1) {
                        this.show = true// 审核或者超管权限
                    }
                }
            })
        },
        cancle () {
            this.render = ''
            this.editmodal = false
            this.tosearch()
            this.title1 = ''
        },
        tosearch () {
            this.page = 1
            this.pagesize = 10
            this.search()
        },
        search () {
            var params = {
                programcode: this.index_Program_number,
                product_name: this.index_Program_name,
                checkstatus: (this.index_audit_status === undefined || this.index_audit_status === null || this.index_audit_status === '') ? 0 : this.index_audit_status,
                page: this.page,
                pagesize: this.pagesize
            }
            axios.request({
                url: '/dnc/DncPgCreate/GetProgramCheckLists',
                params,
                method: 'get'
            }).then(res => {
                this.total = res.data.total
                this.mockTableData1(res.data.data)
            })
            this.obj = {}
            this.selectids = []
        },
        mockTableData1 (tablelist) {
            let data = []
            tablelist.forEach(item => {
                if (item) {
                    data.push({
                        id: item.id,
                        program_code: item.program_code,
                        productid: item.productid,
                        createmid: item.createmid,
                        createtime: item.createtime,
                        create_remark: item.create_remark,
                        checkmid: item.checkmid,
                        checktime: item.checktime,
                        check_remark: item.check_remark,
                        checkinfo: item.checkinfo,
                        checkstatus: item.checkstatus,
                        status: item.status,
                        file_url: item.file_url,
                        file_name: item.file_name,
                        projectid: item.projectid,
                        file_size: item.file_size,
                        productname: item.productname,
                        code: item.code,
                        createname: item.createname,
                        checkname: item.checkname,
                        drawno: item.drawno,
                        parentproccess: item.parentproccess,
                        workproccess: item.workproccess,
                        workproccess_name: item.workproccess_name
                    })
                }
            })
            this.tableData1 = data
        },
        getproduct () {
            axios.request({
                url: '/config/ProjectProduct/GetProductsByCode?code=&name=&count=50',
                method: 'get'
            }).then(res => {
                this.products = res.data.data
                this.products1 = res.data.data
            })
        },
        download () {
            if (!this.obj.id) {
                this.$Message.error(this.$t('1043'))
                return
            }
            if (this.obj.file_url === null || this.obj.file_url === undefined || this.obj.file_url === '') {
                this.$Message.error(this.$t('9000147'))
                return
            }
            axios.request({
                url: '/dnc/DncPgCreate/getContent?file_url=' + this.obj.file_url,
                method: 'get'
            }).then(res => {
                if (res.data.ret === 1) {
                    var info = res.data.data
                    var content = info.content.replace(/\n/g, '\r\n')
                    this.funDownload(content, this.obj.file_name)
                } else {
                    this.$Message.error(this.$t(res.data.msg))
                }
            })
        },
        // 下载方法
        funDownload (content, filename) {
            // 创建隐藏的可下载链接
            var eleLink = document.createElement('a')
            eleLink.download = filename
            eleLink.style.display = 'none'
            // 字符内容转变成blob地址
            var blob = new Blob([content])
            eleLink.href = URL.createObjectURL(blob)
            // 触发点击
            document.body.appendChild(eleLink)
            eleLink.click()
            // 然后移除
            document.body.removeChild(eleLink)
        },
        handlePageSize (value) {
            this.page = 1
            this.pagesize = value
            this.tableData1 = this.search()
        },
        changePage (value) {
            this.page = value
            this.tableData1 = this.search()
        },
        handleRowChange (currentRow, oldCurrentRow) {
            this.obj = currentRow
        },
        handleExpandChange (currentRow, status) {
            if (status) {
                this.handleSpinShow()
                this.content = ''
                axios.request({
                    url: '/dnc/DncPgCreate/getContent?file_url=' + currentRow.file_url,
                    method: 'get'
                }).then(res => {
                    this.content = res.data.data.content
                    this.$Spin.hide()
                }).catch(res => {
                    this.$Spin.hide()
                })
                var objData = this.$refs.currentRowTable1.$data.objData
                var data = []
                for (var val in this.$refs.currentRowTable1.$data.objData) {
                    data.push(val)
                }
                data.forEach(index => {
                    if (objData[index].id !== currentRow.id) {
                        objData[index]._isExpanded = false
                    }
                })
            } else {
            }
        },
        handleSpinShow () {
            this.$Spin.show()
        },
        handleSelectRow: function (data) {
            this.selectids = []
            for (var i in data) {
                if (this.selectids.indexOf(data[i].id) < 0) {
                    this.selectids.push({
                        programid: data[i].id,
                        programcode: data[i].programcode,
                        checkstatus: data[i].checkstatus
                    })
                }
            }
        }
    }
}
</script>
<style lang="less" scoped>
.expand-row{
    margin-bottom: 16px;
}
.demo-spin-icon-load{
  animation: ani-demo-spin 1s linear infinite;
}
</style>
