<template>
    <div class="saveList">
        <h4>
            <i class="el-icon-d-arrow-right" @click="saveHide"></i>
            <span>{{title}}</span>
            <span>{{btn}}</span>
        </h4>
        <p class="list" v-for="(item, index) in lists" :key="item.text">
            <span @click="gotoResult(item)">{{item.localName}}</span>
            <span><i class="el-icon-delete" @click="deleteBtn(item.code)"></i></span>
        </p>
    </div>
</template>

<script>
import { queryList, doDelete } from '../../../../api/dcsApi.js';
export default {
  name: 'saveList',
  data() {
    return {
        title: this.$t('field.customQueryCombination'),
        btn: this.$t('field.control'),
        lists: []
    };
  },
  mounted() {
    this.queryList()
  },
  methods: {
    async queryList () {
        let param = {
            "queryParam.moduleName": "dcsUserCondition",
            "queryParam.user": Eui.Share.get("loginId")
        }
        let formData = new FormData();
        formData.append('reqJson', JSON.stringify(param));
        const res = await queryList(formData)
        this.lists = res.data.result.datals
    },
    gotoResult (item) {
        this.$emit('gotoResult', item.data)
    },
    deleteBtn (code) {
        this.$confirm(this.$t('field.areYouSureYouWantToPerformThisOperation'), this.$t('field.tip'), {
          confirmButtonText: this.$t('field.confirm'),
          cancelButtonText: this.$t('field.cancel'),
          type: 'warning'
        }).then(() => {
            this.deleteItem(code)
        }).catch(() => {       
        });
    },
    async deleteItem (code) {
        let param = {
            "queryParam.moduleName": "dcsUserCondition",
            "queryParam.domain": JSON.stringify({
                code: code,
                user: Eui.Share.get("loginId")
            })
        }
        let formData = new FormData();
        formData.append('reqJson', JSON.stringify(param));
        await doDelete(formData)
        this.queryList()
        this.$message({
            type: 'success',
            message: this.$t('field.operationSuccessful')
        });
    },
    saveHide () {
        this.$emit('saveHide',true)
    }
  }
};
</script>

<style lang="scss" scoped>
    .saveList{
        width: 100%;
        h4{
            padding: 6px 20px;
            padding-left: 30px;
            margin: 0;
            background-color: var(--select-item-hover-bg);
            display: flex;
            justify-content: space-between;
            border-bottom: 1px solid var(--scrollBar);
            position: relative;
            i{
                position: absolute;
                left: 9px;
                top: 50%;
                transform: translateY(-50%);
                cursor: pointer;
            }
            span{
                &:first-child{
                    flex: 1;
                }
                &:last-child{
                    display: inline-block;
                    width: 50px;
                    text-align: center;
                }
            }
        }
        .list{
            padding: 10px 20px;
            padding-left: 30px;
            margin: 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid var(--scrollBar);
            &:hover{
                background-color: var(--blue-10);
            }
            span{
                cursor: pointer;
                &:first-child{
                    flex: 1;
                }
                &:last-child{
                    display: inline-block;
                    width: 50px;
                    text-align: center;
                    margin-left: 80px;
                    i{
                        color: var(--color-90);
                    }
                }
            }
        }
    }
</style>