import { watch } from "vue";
import { getApiKey, getApiList, getDelApi, getApiInfo ,getUpdateAPI} from "../../../api/APIkey";
export default {
    data() {
        return {
            dialogVisible: false,
            modifyDialogVisible: false,
            params: {
                ip: "",
                perms: "",
            },
            listParams: {
                page: 1,
                limit: 10,
            },
            ApiKeyLoading: false,
            checkList: [],
            checkIp: true,

            checkAll: false,
            checkedItems: [],
            apiList: [

                {
                    remark: "测试备注",
                    jurisdiction: [
                        "矿工", "收益", "支付",
                    ],
                    account: "afhaifhauhf",
                    coin: "BTC",
                    url: "https://www.m2pool.com/mining-user/10f74b7beb73e27e8d442e7958801fda?user_name=lx497681109",
                },
                {
                    remark: "测试备注",
                    jurisdiction: [
                        "矿工", "收益",
                    ],
                    account: "afhaifddddhauhf",
                    coin: "BTC",
                    url: "https://www.m2pool.com/mining-user/10f74b7beb73e27e8d442e7958801fda?user_name=lx497681109",
                },


            ],
            jurisdictionList: [
                {
                    value: "miner",
                    label: "personal.minerAPI"
                },
                {
                    value: "account",
                    label: "personal.accountApi"
                },
                {
                    value: "pool",
                    label: "personal.miningPoolApi"
                },


            ],
            apiPageLoading: false,
            apiInfo: {
                ip: "",
                perms: [],
            },
            infoCheckIp: true,
            modifyParams: {
                id: "",
                ip: "",
                perms: "",
            },
        }
    },
    watch: {
        infoCheckIp(val) {
            if (val) {
                this.apiInfo.ip = ""
            }
        },
        checkIp(val) {
            if (val) {
                this.params.ip = ""
            }
        },
        params:{
            handler(newValue) {
               if (newValue.ip) {
                    this.checkIp =false
               }
            },
            deep: true,
            
        }

    },
    mounted() {
        this.fetchApiList(this.listParams)
        this.registerRecoveryMethod('fetchApiList', this.listParams);

    },
    methods: {
        async fetchApiKey(params) {
            this.ApiKeyLoading = true
            this.setLoading('ApiKeyLoading', true);
            const data = await getApiKey(params)
            if (data && data.code == 200) {
                this.fetchApiList(this.listParams)
                this.dialogVisible = false
            }

            this.setLoading('ApiKeyLoading', false);
        },
        async fetchApiList(params) {
            this.apiPageLoading = true
            const data = await getApiList(params)
            if (data && data.code == 200) {
                this.apiList = data.rows
            }

            this.setLoading('apiPageLoading', false);
        },
        async fetchApiInfo(params) {
            this.apiPageLoading = true
            const data = await getApiInfo(params)
            if (data && data.code == 200) {
                this.apiInfo = data.data
                if (this.apiInfo.ip) {
                    this.infoCheckIp = false
                }
            }

            this.setLoading('apiPageLoading', false);
        },
        async fetchUpdateAPI(params) {
            this.apiPageLoading = true
            const data = await getUpdateAPI(params)
            if (data && data.code == 200) {
                this.fetchApiList(this.listParams)
                this.modifyDialogVisible =false
            }

            this.setLoading('apiPageLoading', false);
        },
        async fetchDelApi(params) {
            this.apiPageLoading = true
            const data = await getDelApi(params)
            console.log(data, 666);

            if (data && data.code == 200) {
                this.checkedItems = []
                this.fetchApiList(this.listParams)
            }

            this.setLoading('apiPageLoading', false);
        },
        RequestApiKey() {
            this.dialogVisible = true
        },
        handelJurisdiction(subItem) {
            let obj = this.jurisdictionList.find(item => subItem == item.value)

            try {
                if (obj.value) {
                    return obj.label
                } else {
                    return ""
                }
            } catch {
                console.log(111);

            }



        },
        handelClose(){
            this.params.ip = ""
            this.checkList =[]
        },
        confirmAddition() {
            if (!this.checkIp && !this.params.ip) {
                this.$message({
                    showClose: true,
                    message: this.$t(`personal.ipAddressReminder`),
                    type: 'error'
                });
                return
            }
            const validPattern = /^[0-9.]*$/;
            if (!validPattern.test(this.params.ip)) {
                this.$message({
                    showClose: true,
                    message: this.$t(`personal.ipFormat`),
                    type: 'error'
                });
                return
            }

            if (this.checkList.length == 0) {
                this.$message({
                    showClose: true,
                    message: this.$t(`personal.permissionReminder`),
                    type: 'error'
                });
                return
            }

            if (this.checkList.length > 0) {
                this.params.perms = this.checkList.join(",")
            }

            this.fetchApiKey(this.params)
        },
        handleCheckAllChange(val) {
            console.log(this.checkAll, val, 6565);

            if (val) {
                this.checkedItems = this.apiList.map(item => item.id);
            } else {
                this.checkedItems = []

            }
        },
        handleSingleCheckChange(value) {
            console.log(value, "value");

            let checkedCount = value.length;
            this.checkAll = checkedCount === this.apiList.length;
            this.isIndeterminate = checkedCount > 0 && checkedCount < this.apiList.length;

        },
        deleteSelected() {

            let ids = this.checkedItems.join(",")
            this.fetchDelApi({ ids: ids })
        },

        async handelCopy(id) {

            // var d = document.getElementById(id) //获取需要复制的元素



            // d.select() //选中
            // document.execCommand("copy") //直接复制

            var copyText = document.getElementById(id);
  
            // 选中文本
            copyText.select();
            copyText.setSelectionRange(0, 99999); // 对于移动设备
            
            // 执行复制命令
            document.execCommand('copy');
            
            // 可以通知用户复制成功
            alert("文本已复制到剪贴板");



            // try {
            //     await navigator.clipboard.writeText(d.value);
            //     this.$message({
            //         showClose: true,
            //         message: this.$t(`personal.copySuccessful`),
            //         type: 'success'
            //     });
            // } catch (err) {
            //     console.log(err);
            //     this.$message({
            //         showClose: true,
            //         message: this.$t(`personal.copyFailed`),
            //         type: 'error'
            //     });
            // }
        },






        handelSetUp(item) {
            this.modifyParams.id= item.id
            this.modifyDialogVisible = true
            this.fetchApiInfo({ id: item.id })
        },

        modifyInformation() {
        
            if (!this.infoCheckIp && !this.apiInfo.ip) {
                this.$message({
                    showClose: true,
                    message: this.$t(`personal.ipAddressReminder`),
                    type: 'error'
                });
                return
            }

            if (this.apiInfo.perms.length == 0) {
                this.$message({
                    showClose: true,
                    message: this.$t(`personal.permissionReminder`),
                    type: 'error'
                });
                return
            }
          
            if (this.apiInfo.perms.length > 0) {
                this.modifyParams.perms = this.apiInfo.perms.join(",")
            }
            if (this.apiInfo.ip) {
                this.modifyParams.ip = this.apiInfo.ip
            }else if(this.infoCheckIp){
                this.modifyParams.ip=""
            }
          
            this.fetchUpdateAPI(this.modifyParams)
        },
        clickCopy(item){            
        
            
             // 创建临时输入框
            var tempInput = document.createElement('input');
            tempInput.value = item.key;
            document.body.appendChild(tempInput);

            try {
                tempInput.select();
                const isCopySuccessful = document.execCommand('copy');
                if (isCopySuccessful) {
                    this.$message({
                        showClose: true,
                        message: this.$t(`personal.copySuccessful`),
                        type: 'success',
                  
                    
                    });
                } else {
                    this.$message({
                        showClose: true,
                        message: this.$t(`personal.copyFailed`),
                        type: 'success',
                  
                    
                    });
                }
              } catch (error) {
                this.$message({
                    showClose: true,
                    message: this.$t(`personal.copyFailed`),
                    type: 'success',
              
                
                });
              } finally {
                if (document.body.contains(tempInput)) {
                    document.body.removeChild(tempInput);
                  } else {
                    console.log('临时输入框不是 body 的子节点，无法移除。');
                  }
              }
      
        }
    }
}