<template>
  <div class="height_100">
    <el-container>
        <el-header>
            <div style="width:100%; padding:20px;display:flex;align-items: center;justify-content: space-between;">
                <div>
                    <span v-if="!update.ifUpdate">是否定期更新：{{ update.ifUpdate?'是':'否' }}</span>
                    <span v-else>更新周期：<span>{{ getUpdateCycleName(update.updateCycle) }}</span></span>
                    <span style="margin-left:10px"><i class="iconfont icon-bianji" @click="editUpdate"></i></span>
                </div>
                <div style="">
                    <el-button type="primary" size="small" @click="add">添加</el-button>
                </div>
            </div>
        </el-header>
        <el-main v-DivHeight="getDivHeight">
            <el-table
                ref="table"
                :data="tableData"
                row-key="id"
                style="width: 100%"
                :maxHeight="tableHeight - 40"
                v-loading="loading"
                @selection-change="handleSelectionChange"
            >
                <el-table-column type="selection" width="55" :reserve-selection="true">

                </el-table-column>
                <el-table-column prop="searchCondition" label="检索条件"></el-table-column>
                <el-table-column prop="dbType" label="检索范围" width="140">
                    <template slot-scope="scope">
                    <div>
                        {{ DBType[scope.row.dbType] }}
                    </div>
                    </template>
                </el-table-column>
                <el-table-column prop="ifUpdate" label="下一次是否更新" width="120">
                    <template slot-scope="scope">
                    <div>
                        <el-switch
                            v-model="scope.row.ifUpdate"
                            @change="updateMessage(scope.row)"
                            active-text="是"
                            inactive-text="否">
                        </el-switch>
                    </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createName" label="创建人" width="120">
                    <template slot-scope="scope">
                    <div>
                        {{ scope.row.createName }}
                    </div>
                    </template>
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" width="120">
                    <template slot-scope="scope">
                    <div>
                        {{ scope.row.createTime }}
                    </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="140">
                    <template slot-scope="scope">
                        <div class="icon">
                            <!-- <span @click="editSearch(scope.row)" class="margin-left_10">
                            <el-tooltip class="item" effect="dark" content="编辑" placement="top">
                                <i class="iconfont icon-bianji"></i>
                            </el-tooltip>
                            </span> -->
                            <span @click="delSearch(scope.row)" class="margin-left_10">
                                <el-tooltip class="item" effect="dark" content="删除" placement="top">
                                    <i class="iconfont icon-shanchu"></i>
                                </el-tooltip>
                            </span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-main>
        <el-footer class="pagination" style="display:flex;justify-content:space-between;align-items:center">
          <div style="display:flex;align-items:center">
            <span v-if="multipleSelection.length > 0">
              已勾选 <b>{{ multipleSelection.length }}</b> 条
            </span>
            <div v-show="multipleSelection.length" class="margin-left_10">
              <el-button type="primary" size="small" @click="del">删除</el-button>
            </div>
          </div>
          <div>
            <el-pagination background layout="total, sizes, prev, pager, next, jumper"
              :current-page.sync="queryParams.current" :page-size.sync="queryParams.size"
              @current-change="handleCurrentChange" @size-change="changeSize" :total="total">
            </el-pagination>
          </div>

        </el-footer>
    </el-container>

    <el-dialog title="编辑更新周期" :visible.sync="dialog.showDialog" width="500px" :close-on-click-modal="false" @close="handleClose" append-to-body>
        <el-form :model="form" ref="form" label-width="120px" class="demo-ruleForm">
            <el-form-item label="是否定期更新" prop="ifUpdate">
                <el-switch
                    v-model="form.ifUpdate"
                    active-text="是"
                    inactive-text="否">
                </el-switch>
            </el-form-item>
            <el-form-item label="更新间隔" v-if="form.ifUpdate" prop="updateCycle">
                <el-select
                  v-model="form.updateCycle"
                  clearable
                  placeholder="请选择更新时间间隔"
                  style="margin-right: 20px"
                >
                  <el-option
                    v-for="item in $constants.updateCycle"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" :loading="dialog.btnLoading" @click="submit">确 定</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>
import { getTableHeight } from '@/views/components/mixins'
export default {
  components: {},
  props: {
    projectId:{}
  },
  mixins:[getTableHeight],
  data() {
    return {
        DBType:{
            'CN':'中国',
            "WD":"世界"
        },
        update:{
            ifUpdate:false
        },
        tableData:[],
        multipleSelection:[],
        loading:false,
        queryParams:{
            current:1,
            size:10,
            projectId:this.projectId
        },
        total:0,
        dialog:{
            showDialog:false,
            btnLoading:false
        },
        form:{},
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.getUpdateCycle()
    this.getUpdateCriteria()
  },
  methods: {
    add(){
        var form = {
            importToId:this.projectId,
            importToType:0,
            type:4,
            ifUpdate:this.update.ifUpdate,
            isUpdateCriteria:true
        }
        this.$commonJS.toImportParent(form,4)
    },
    getUpdateCycle(){
        var params = {
            projectId:this.projectId
        }
        this.$api.queryProjectQuartz(params).then(res=>{
            if(res.code == 200){
                this.update = res.data
            }
        })
    },
    getUpdateCycleName(updateCycle){
        var arr = this.$constants.updateCycle
        var obj = arr.find(item=>{
            return item.value == updateCycle
        })
        if(obj){
            return obj.label
        }
        return ''
    },
    getUpdateCriteria(){
        this.loading = true
        this.$api.queryQuartzCondition(this.queryParams).then(response=>{
            if(response.code == 200){
                this.tableData = response.data.data
                this.total = response.data.total
                this.loading = false
            }
        }).catch(error=>{
            this.tableData = []
            this.loading = false
        })
    },
    handleSelectionChange(val){
        this.multipleSelection = val
    },
    handleCurrentChange(val){
        this.queryParams.current = val
        this.getUpdateCriteria()
    },
    //切换页大小
    changeSize(val){
      this.queryParams.size = val
      this.queryParams.current = 1
      this.getUpdateCriteria()
    },
    del(){
        var ids = this.multipleSelection.map(item=>{
            return item.id
        })
        this.removeSearchRecords(ids,1)
    },
    delSearch(row){
        this.removeSearchRecords([row.id])
    },
    removeSearchRecords(ids,type){
        this.$confirm('确认删除本条数据吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$api.removeQuartzCondition({ids:ids}).then(response=>{
                if(response.code == 200){
                    this.$message.success('删除成功')
                    this.getUpdateCriteria()
                    if(type){
                        this.multipleSelection = []
                        this.$refs.table.clearSelection();
                    }else{
                        var id = response.data.data[0]
                        var index = this.multipleSelection.findIndex(item=>{
                            return item.id == id
                        })
                        if(index!=-1){
                            this.multipleSelection.splice(index,1)
                        }
                    }
                    
                }
            }).catch(error=>{
                // this.$message.error('删除失败')
            })
        })
    },
    updateMessage(row){
        this.$api.updateQuartzCondition(row).then(response=>{
            if(response.code == 200){}
        }).catch(error=>{
            this.$message.error('修改失败')
            this.$set(row,'ifUpdate',!row.ifUpdate)
        })
    },
    editUpdate(){
        this.form = {
            ...this.update
        }
        this.dialog.showDialog = true
    },
    handleClose(){
        this.dialog.btnLoading = false
        this.dialog.showDialog = false
    },
    submit(){
        this.dialog.btnLoading = true
        var form = {
            ...this.form,
            projectId:this.projectId
        }
        if(!form.ifUpdate){
            form.updateCycle = ''
        }
        this.$api.setProjectQuartz(form).then(response=>{
            if(response.code == 200){
                this.$message.success('更新成功')
                this.update = response.data
                this.handleClose()
                this.getUpdateCycle()
            }
        }).catch(error=>{
            this.$message.error('更新失败')
            this.dialog.btnLoading = false
        })
    },
  },
};
</script>
<style lang="scss" scoped>
</style>