<template>
  <el-dialog :close-on-click-modal="false" :title="'查找与替换'" :visible.sync="dialogFormVisible" width="550px" top="20vh"
    @close="closeDialog">
    <el-form ref="dialogForm" :rules="rules" label-width="100px" v-loading="dialogLoading">
      <el-row :gutter="20" class="small-title">
        查找环境值
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="查找值" prop="findValue">
            <el-input v-model="dialogForm.findValue"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="类型" prop="serviceType">
            <!--<el-input v-model="dialogForm.type"></el-input>-->
            <el-select v-model="serviceType.value" placeholder="请选择">
              <el-option v-for="item  in serviceType" :label="item.value" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="变量类型" prop="variableType">
            <!--<el-input v-model="dialogForm.type"></el-input>-->
            <el-select v-model="dialogForm.variableType" placeholder="请选择">
              <el-option v-for="item  in typeList" :label="item" :value="item"></el-option>
            </el-select>
          </el-form-item>

        </el-col>
      </el-row>
    
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="项目" prop="type">
            <!--<el-input v-model="dialogForm.type"></el-input>-->
            <el-select v-model="itemList.name" placeholder="请选择">
              <el-option v-for="item  in itemList" :label="item.name" :value="item.name"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20" class="small-title">
        替换环境值
      </el-row>
      <el-row :gutter="20">
        <el-col :span="22">
          <el-form-item label="替换为" prop="replacevalue">
            <el-input v-model="dialogForm.replacevalue"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <span slot="footer">
      <el-button type="primary" @click="find()">查 找</el-button>
      <el-button type="primary" @click="replace()">替 换</el-button>
      <el-button @click="dialogFormVisible = false">取 消</el-button>

    </span>
  </el-dialog>
</template>

<script>
// import { getUserDetail, saveUser, resetDefault } from '@/api/system_manage'
// import { getUserDetail, getAccountDetail } from '@/api/system_manage'
import { findQuery, getVariables, replaceRecord } from '@/api/system_manage'
import { queryProjectList, getProjectListDetail, deleteProjectList } from '@/api/project_list'
export default {
  name: 'findDialog',
  data() {
    return {
      dialogFormVisible: this.value,
      dialogLoading: false,
      dialogForm: {},
      valuetype: '',
      dataList: [],
      serviceType: [
        {
          value: '业务服务',
          label: 'bussness'
        },
        {
          value: '代理服务',
          label: 'proyx'
        },
      ],
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0
      },
      projectId: localStorage.getItem('projectID'),
      tableLists: [],
      rules: {
        username: [
          { required: true, message: '查找值不能为空', trigger: 'blur' }
        ],
        //   name: [
        //     { required: true, message: '账户名称不能为空', trigger: 'blur' }
        //   ],
        //   type: [
        //     { required: true, message: '账户类型不能为空', trigger: 'blur' }
        //   ],
        // findname: [
        //   { required: true, message: '替换值不能为空', trigger: 'blur' }
        // ]
      }
    }
  },
  props: {
    value: {
      type: Boolean,
      default: ''
    },
    checkItem: {
      type: Object,
      default() {
        return {}
      }
    },
    typeList: {
      type: Array,
      default() {
        return []
      }
    },
    itemList: {
      type: Array,
      default() {
        return []
      }
    }
  },
  mounted() {
    // getVariables()
    // getData()
  },
  watch: {
    value(val) {
      if (val) {
        if (this.checkItem.id) {
          this.requestData(this.checkItem.id)
        } else {
          this.dialogForm = {
            projectId: this.projectId
          }
        }
      }
      this.dialogFormVisible = val
      console.log(this.typeList, '1231444')

    },
    dialogFormVisible(val) {
      this.$emit('input', val)
    }
  },
  methods: {
    closeDialog() {
      this.$refs.dialogForm.resetFields()
    },
    requestData(id) {
      this.dialogLoading = true
      getAccountDetail(id).then((rt) => {
        this.dialogForm = rt.data
        this.dialogLoading = false
      }).catch(() => {
        this.dialogLoading = false
      })
    },
    find() {
      console.log(this.itemList.id,'this.itemList')
      const filters = [
        {
          key: 'variable',
          opt: "LIKE",
          type: "S",
          value: this.dialogForm.findValue
        },
        {
          key: 'project_id',
          opt: "LIKE",
          type: "S",
          value: this.itemList.id
        },
        {
          key: 'service_type',
          opt: "LIKE",
          type: "S",
          value: this.serviceType.value
        },
        {
          key: 'variable_type',
          opt: "LIKE",
          type: "S",
          value: this.dialogForm.variableType
        },
      ]
      // let pageSize
      // if (filters.length === 1) {
      //   pageSize = 1000
      // } else {
      //   pageSize = this.page.pageSize
      // }
      findQuery({
        filters: filters,
        orderby: 'createon',
        sort: 'desc',
        pageNum: 1,
        pageSize: 1000,
        access_token: null,
        attr: {},
      // pageNum: this.page.pageNum,
      }).then((rt) => {
        this.dialogLoading = false
        if (rt.status === '200') {
          this.tableLists = rt.data.list
          this.dialogFormVisible = true
          console.log(123, '141414ad', this.tableLists)
          this.$emit('confirm', this.tableLists)
          this.$message({
            message: `查找成功`,
            type: 'success'
          })

        }
      }).catch(() => {
        this.dialogLoading = true
      })
    },
    replace() {
      const filters =[
          {  findValue: this.dialogForm.findValue,
            variableType: this.dialogForm.variableType,
            projectId: this.projectId,
            serviceType: this.serviceType.value,
            replaceValue: this.dialogForm.replacevalue
          }
      ]
      if (this.dialogForm.replacevalue == null) {
        this.dialogFormVisible = true
        this.$message({
          message: `替换值不能为空`,
          type: 'error'
        })
      } if (this.dialogForm.replacevalue != null) {
        this.$confirm('确定替换？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.dialogFormVisible = true
          replaceRecord({
            findValue: this.dialogForm.findValue,
            variableType: this.dialogForm.variableType,
            projectId: this.projectId,
            serviceType: this.serviceType.value,
            replaceValue: this.dialogForm.replacevalue
          })
          .then((rt) => {
            this.$message({
              message: '替换成功',
              type: 'success'
            })
            this.dialogFormVisible = false
            findQuery({
        filters:   [
        {
          key: 'variable',
          opt: "LIKE",
          type: "S",
          value: this.dialogForm.findValue
        },
        {
          key: 'project_id',
          opt: "LIKE",
          type: "S",
          value: this.itemList.id
        },
        {
          key: 'service_type',
          opt: "LIKE",
          type: "S",
          value: this.serviceType.value
        },
        {
          key: 'variable_type',
          opt: "LIKE",
          type: "S",
          value: this.dialogForm.variableType
        },
      ],
        orderby: 'createon',
        sort: 'desc',
        pageNum: 1,
        pageSize: 1000,
        access_token: null,
        attr: {}
      }).then((rt) => {
        this.dialogLoading = false
        if (rt.status === '200') {
          this.tableLists = rt.data.list
          this.dialogFormVisible = false
          console.log(123, '141414ad', this.tableLists)
          this.$emit('confirm', this.tableLists)
        }
      }).catch(() => {
        this.dialogLoading = false
      })
          }).catch(e => {
            this.dialogFormVisible = false
          })
        }).catch(() => {
        })
      }
    }
  },
  async getData() {
    this.tableLoading = true
    const rt = await queryProjectList({
      logic: this.logic,
      filters: this.filters,
      ...this.sort,
      ...this.page
    }).catch(e => {
      this.tableLoading = false
      // return Promise.reject(e)
    })
    if (rt.status === '200') {
      this.tableLoading = false
      this.dialogForm = rt.data.list || []
      this.page.total = rt.data.total
      // return Promise.resolve(rt)
    } else {
      this.tableLoading = false
    }
  },

}
</script>

<style type="text/scss" lang="scss" scoped>
.small-title {
  font-weight: 600;
  padding-left: 20px;
  margin-bottom: 20px;
}

.el-form-item__label-wrap>.el-form-item__label:before {
  color: #ea3c40;
  margin-right: 4px;
}
</style>
