<template>
  <div>
    <el-dialog title="链接及文件检查" :visible.sync="isShow" @open="dialogOpen" class="link-check-dialog">
      <el-toolbar>
        <el-button @click="showDetail" :disabled="selectedRows.length !== 1" :priv="`com.zving.cms.Site.Edit.${siteID}`">
          <i class="fa fa-search" aria-hidden="true"></i>查看</el-button>
        <el-button @click="check" :priv="`com.zving.cms.Site.Edit.${siteID}`">
          <i class="fa fa-edit" aria-hidden="true"></i>链接及文件检查</el-button>
      </el-toolbar>
      <div class="search-bar">
        发布平台：
        <el-select v-model="platformID" clearable style="width:15%;">
          <el-option v-for="item in platformOptions" :key="item.ID" :label="item.name" :value="item.ID"></el-option>
        </el-select>
        &nbsp;所属栏目：
        <treeSelect :value.sync="catalogID" :items="catalogTrees" width="15%" clearable></treeSelect>
        &nbsp;类型：
        <el-select v-model="type" clearable style="width:15%;">
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-button type="primary" @click="search">查询</el-button>
      </div>
      <el-table tooltip-effect="dark" :data="datas" :data-read-url="getDataGrid" :page-size="10" :auto-get-data="false" ref="linkCheckTable" style="width: 100%" @selection-change="selectionChange">
        <el-table-column type="index" label="序号" width="60"></el-table-column>
        <el-table-column type="selection" align="center" width="40"></el-table-column>
        <el-table-column prop="platformName" label="发布平台" width="80" show-overflow-tooltip></el-table-column>
        <el-table-column prop="catalogName" label="所属栏目" width="90" show-overflow-tooltip></el-table-column>
        <el-table-column prop="typeName" label="类型" width="100" show-overflow-tooltip></el-table-column>
        <el-table-column prop="detail" label="详细信息" show-overflow-tooltip></el-table-column>
        <el-table-column prop="addTime" label="添加时间" show-overflow-tooltip width="155"></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 详情弹框 -->
    <el-dialog title="链接及文件检查" :visible.sync="linkCheckDetailModal" class="link-check-detail-dialog">
      <el-form :model="linkCheckDetail" label-width="150px">
        <el-form-item label="ID：">
          {{linkCheckDetail.ID}}
        </el-form-item>
        <el-form-item label="发布平台：">
          {{linkCheckDetail.platformName}}
        </el-form-item>
        <el-form-item label="所属栏目：">
          {{linkCheckDetail.catalogName}} ({{linkCheckDetail.catalogInnerCode}})
        </el-form-item>
        <el-form-item label="类型：">
          {{linkCheckDetail.typeName}}
        </el-form-item>
        <el-form-item label="详细信息：">
          <el-input type="textarea" v-model="linkCheckDetail.detail" :rows="4" :disabled="true" style="width:80%;"></el-input>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 检查弹框 -->
    <el-dialog title="链接及文件检查" :visible.sync="checkLinkModal" class="check-link-dialog">
      <el-row :gutter="10">
        <el-col :span="6">
          <div style="text-align:right;">选择栏目：</div>
        </el-col>
        <el-col :span="10">
          <tree-select :value.sync="checkCatalogID" :disable-root="false" :items="catalogTrees">
          </tree-select>
        </el-col>
        <el-col :span="8">
          <el-checkbox-group v-model="checkFlags">
            <span v-for="item in checkOptions" :key="item.key">
              <el-checkbox :label="item.key">{{item.value}}</el-checkbox>
            </span>
          </el-checkbox-group>
        </el-col>
      </el-row>
      <br/>
      <div style="color:red;text-align:center">注意：执行前会清除掉现有日志。</div>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="confirmCheck">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import TreeSelect from '@src/components/TreeSelect.vue'
import util from '@src/common/util.js'
export default {
  data() {
    return {
      platformID: null,
      catalogID: null,
      type: null,
      datas: [],
      selectedRows: [],
      platformOptions: [],
      catalogTrees: [],
      typeOptions: [],
      linkCheckDetailModal: false,
      linkCheckDetail: {},
      checkLinkModal: false,
      checkCatalogID: null,
      checkFlags: [],
      checkOptions: []
    }
  },
  computed: {
    isShow: {
      get() {
        return this.show
      },
      set(val) {
        this.$emit('update:show', false)
      }
    }
  },
  methods: {
    async dialogOpen() {
      this.platformID = null
      this.catalogID = null
      this.type = null
      this.datas = []
      this.selectedRows = []
      let getPlatform = await axios.get(
        '/ui/publishplatform/usedpublishplatforms'
      )
      this.platformOptions = getPlatform.data.data
      let getTree = await axios.get('/ui/catalog/admintree')
      this.catalogTrees = getTree.data.data
      // console.log(this.catalogTrees)
      let getType = await axios.get('/ui/platform/codes/LinkCheckErrorType')
      this.typeOptions = getType.data.data
      this.$refs.linkCheckTable.getData(1)
    },
    showDetail() {
      if (this.selectedRows.length < 1) {
        this.$alert('请先选择一条记录', '提示', {
          type: 'info'
        })
        return
      }
      this.linkCheckDetail = Object.assign({}, this.selectedRows[0])
      this.linkCheckDetailModal = true
    },
    async check() {
      this.checkCatalogID = null
      this.checkFlags = []
      let res = await axios.get(
        `/ui/sites/${this.siteID}/linkchecklog/getoptions`
      )
      this.checkOptions = res.data.data
      this.checkLinkModal = true
    },
    async confirmCheck() {
      let res = await axios.put(`/ui/sites/${this.siteID}/linkchecklog`, {
        flags: this.checkFlags,
        catalogID: this.checkCatalogID
      })
      util.showResponseMessage(res.data)
      if (res.data.status === 1) {
        this.checkLinkModal = false
        try {
          await util.showProgress(res.data.taskID, '链接检查任务正在运行，请稍候 . . .')
          this.search()
        } catch (e) {

        }
      }
    },
    selectionChange(selection) {
      this.selectedRows = selection
    },
    search() {
      this.$refs.linkCheckTable.getData(1)
    },
    getDataGrid() {
      return [
        `/ui/sites/${this.siteID}/linkchecklog`,
        {
          params: {
            platformID: this.platformID,
            catalogID: this.catalogID,
            type: this.type
          }
        }
      ]
    }
  },
  props: {
    show: {
      type: Boolean,
      required: true
    },
    siteID: {
      type: Number,
      required: true
    }
  },
  components: {
    treeSelect: TreeSelect
  }
}
</script>

<style>
.link-check-dialog .el-dialog {
  width: 1000px;
}

@media (max-width: 480px) {
  .link-check-dialog .el-dialog {
    width: 96%;
  }
}

.link-check-detail-dialog .el-dialog {
  width: 800px;
}

@media (max-width: 480px) {
  .link-check-detail-dialog .el-dialog {
    width: 96%;
  }
}

.check-link-dialog .el-dialog {
  width: 450px;
}

@media (max-width: 480px) {
  .check-link-dialog .el-dialog {
    width: 90%;
  }
}
</style>
<style scoped>
.search-bar {
  text-align: right;
  padding: 10px 5px 0 0;
}
</style>
