<template>
  <div style="height: 100%;">
    <div class="iotmenu-content-header">
      <a-icon type="file-text" />
      <span>登录配置</span>
    </div>
    <a-card :bordered="false" class="iotmenu-content">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
          <div class="iotmenu-search-container">
            <div class="item-search-btn">
              <a-button @click="handleAdd" type="primary" icon="plus">新增</a-button>
            </div>
          </div>
      </div>
      <!-- 查询区域-END -->
      <div>
        <a-table
          ref="table"
          size="middle"
          :scroll="{x:true}"
          rowKey="id"
          :columns="columns"
          :dataSource="dataSource"
          :pagination="ipagination"
          :loading="loading"
          class="j-table-force-nowrap"
          @change="handleTableChange">
          <!-- :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}" -->

          <template slot="htmlSlot" slot-scope="text">
            <div v-html="text"></div>
          </template>
          <template slot="imgSlot" slot-scope="text,record">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-if="text" :src="getImgView(text)" :preview="record.id" height="25px" alt="" style="max-width:80px;font-size: 12px;font-style: italic;"/>
          </template>
          <template slot="fileSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无文件</span>
            <a-button
              v-else
              :ghost="true"
              type="primary"
              icon="download"
              size="small"
              @click="downloadFile(text)">
              下载
            </a-button>
          </template>

          <!-- 状态渲染模板 -->
          <template slot="customRenderStatus" slot-scope="status">
            <a-tag v-if="status==0" color="green">启用</a-tag>
            <a-tag v-if="status==1" color="orange">禁用</a-tag>
          </template>

          <span slot="action" slot-scope="text, record">
            <a-tooltip style="margin-right: 10px;">
              <template slot="title"> 设置 </template>
              <span class="edit-btn" @click="handleEdit(record)"></span>
            </a-tooltip>
            <a-popconfirm style="margin-right: 10px;" title="确定删除吗?" @confirm="() => handleDelete(record.id)">
              <a-tooltip>
                <template slot="title"> 删除 </template>
                <span class="delete-btn"></span>
              </a-tooltip>
            </a-popconfirm>
            <a-popconfirm v-if="record.status==='0'" title="确定禁用吗?" @confirm="() => handleStatus(record.id,1)">
              <a-tooltip>
                <template slot="title"> 禁用 </template>
                <span class="status-btn"></span>
              </a-tooltip>
            </a-popconfirm>
            <a-popconfirm v-if="record.status==='1'" title="确定启用吗?" @confirm="() => handleStatus(record.id,0)">
              <a-tooltip>
                <template slot="title"> 启用 </template>
                <span class="status-btn"></span>
              </a-tooltip>
            </a-popconfirm>
          </span>

        </a-table>
      </div>

      <login-config-modal ref="modalForm" @ok="modalFormOk"></login-config-modal>
    </a-card>
  </div>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { getAction, postAction } from '@/api/manage'
  import LoginConfigModal from './modules/LoginConfigModal'

  export default {
    name: 'LoginConfigList',
    mixins:[JeecgListMixin, mixinDevice],
    components: {
      LoginConfigModal
    },
    data () {
      return {
        description: '联锁登陆页配置表管理页面',
        // isDefault: true,
        // 表头
        columns: [
          // {
          //   title: '#',
          //   dataIndex: '',
          //   key:'rowIndex',
          //   width:60,
          //   align:"center",
          //   customRender:function (t,r,index) {
          //     return parseInt(index)+1;
          //   }
          // },
          {
            title:'logo图片',
            align:"center",
            dataIndex: 'logoPic',
            scopedSlots: {customRender: 'imgSlot'}
          },
          {
            title:'背景图片',
            align:"center",
            dataIndex: 'backPic',
            scopedSlots: {customRender: 'imgSlot'}
          },
          {
            title:'网址',
            align:"center",
            dataIndex: 'companyUrl'
          },
          {
            title:'地址',
            align:"center",
            dataIndex: 'companyAddress'
          },
          {
            title:'电话',
            align:"center",
            dataIndex: 'companyTelephone'
          },
          {
            title:'版权',
            align:"center",
            dataIndex: 'companyCopyright'
          },
          {
            title:'状态',
            align:"center",
            dataIndex: 'status',
            scopedSlots: { customRender: 'customRenderStatus' },
          },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:120,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/interlockLoginConfig/interlockLoginConfig/list",
          delete: "/interlockLoginConfig/interlockLoginConfig/delete",
          editStatus: "/interlockLoginConfig/interlockLoginConfig/editStatus",
          // deleteBatch: "/loginConfig/loginConfig/deleteBatch",
          // exportXlsUrl: "/loginConfig/loginConfig/exportXls",
          // importExcelUrl: "loginConfig/loginConfig/importExcel",
          
        },
        dictOptions:{},
        superFieldList:[],
      }
    },
    created() {
    this.getSuperFieldList();
    },
    computed: {
      importExcelUrl: function(){
        return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`;
      },
    },
    methods: {
      loadData(arg) {
        if(!this.url.list){
          this.$message.error("请设置url.list属性!")
          return
        }
        //加载数据 若传入参数1则加载第一页的内容
        if (arg === 1) {
          this.ipagination.current = 1;
        }
        var params = this.getQueryParams();//查询条件
        this.loading = true;
        getAction(this.url.list, params).then((res) => {
          if (res.success) {
            //update-begin---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
            var data = res.result.records||res.result
            // if(data.length === 0){
            //   this.isDefault = true
            //   this.dataSource.push({
            //     id: 'defalut001',
            //     logoPic: require('@/assets/logo.png'),
            //     backPic: require('@/assets/login.png'),
            //     companyCopyright: '© 1983-2024 Advantech Co., Ltd.',
            //   })
            // } else {
            //   this.isDefault = false
            //   this.dataSource = data
            // }
            // this.isDefault = false
            console.log("data", data)
            this.dataSource = data
            if(res.result.total)
            {
              this.ipagination.total = res.result.total;
            }else{
              this.ipagination.total = 0;
            }
            //update-end---author:zhangyafei    Date:20201118  for：适配不分页的数据列表------------
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      handleEdit(record) {
        this.$refs.modalForm.edit(record);
        this.$refs.modalForm.title = "编辑";
        this.$refs.modalForm.disableSubmit = false;
      },
      handleStatus(id, status) {
        this.loading = true;
        var params = {id: id, status: status};//查询条件
        console.log("params", params)
        postAction(this.url.editStatus, params).then((res) => {
          if (res.success) {
            this.loadData()
          }else{
            this.$message.warning(res.message)
          }
        }).finally(() => {
          this.loading = false
        })
      },
      initDictConfig(){
      },
      getSuperFieldList(){
        let fieldList=[];
        fieldList.push({type:'string',value:'backPic',text:'背景图片',dictCode:''})
        fieldList.push({type:'string',value:'logoPic',text:'logo图片',dictCode:''})
        fieldList.push({type:'string',value:'companyUrl',text:'公司网址',dictCode:''})
        fieldList.push({type:'string',value:'companyAddress',text:'公司地址',dictCode:''})
        fieldList.push({type:'string',value:'companyTelephone',text:'公司电话',dictCode:''})
        fieldList.push({type:'string',value:'companyCopyright',text:'公司版权',dictCode:''})
        this.superFieldList = fieldList
      }
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>