<template>
  <div>
    <el-dialog
      title="url参数设置"
      :visible.sync="dialogVisible"
      width="50%"
      append-to-body
    >
      <el-button type="primary" @click="addUrlParameter()">添加参数</el-button>
      <el-table :data="urlParameter" border style="width: 100%">
        <el-table-column prop="key" label="键" width="180">
          <template slot-scope="scope">
            <el-input v-model="urlParameter[scope.$index].key"></el-input
          ></template>
        </el-table-column>
        <el-table-column prop="type" label="值类型" width="180">
          <template slot-scope="scope">
            <el-select
              v-model="urlParameter[scope.$index].type"
              placeholder="请选择"
            >
              <el-option
                v-for="item in [
                  {value: '1', label: '表单变量'},
                  {value: '2', label: '固定值'},
                  {value: '3', label: 'js脚本'},
                  {value: '4', label: '常用变量'}
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="值">
          <template slot-scope="scope">
            <ht-select
              v-if="urlParameter[scope.$index].type == 1"
              v-model="urlParameter[scope.$index].value"
              :options="allBoData.filter(tab => tab.type == 'main')"
              :props="{key: 'name', value: 'desc'}"
              clearable
              filterable
            >
              <template slot-scope="{options}">
                <el-option key="0" label="请选择" :value="''" />
                <el-option-group
                  v-for="(group, idenx) in options"
                  :key="Math.random() + idenx"
                  :label="group.desc"
                >
                  <el-option
                    v-for="item in group.children"
                    :disabled="item.name == field.name"
                    :key="item.id"
                    :label="item.desc"
                    :value="item.path + '.' + item.name"
                  ></el-option>
                </el-option-group>
              </template>
            </ht-select>

            <el-input
              v-if="urlParameter[scope.$index].type == 2"
              v-model="urlParameter[scope.$index].value"
            ></el-input>
            <el-button
              type="primary"
              v-if="urlParameter[scope.$index].type == 3"
              @click="scriptTextOpen(scope.$index)"
              >编写js脚本</el-button
            >
            <el-select
              v-if="urlParameter[scope.$index].type == 4"
              v-model="urlParameter[scope.$index].value"
              placeholder="请选择"
            >
              <el-option
                v-for="item in [
                  {value: '1', label: '当前用户名'},
                  {value: '2', label: '当前用户id'},
                  {value: '3', label: '用户账号'},
                  {value: '4', label: '用户token'},
                  {value: '5', label: '任务id'},
                  {value: '6', label: '实例id'}
                ]"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </template>
        </el-table-column>
        <el-table-column prop="value" label="操作">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="urlParameter.splice(scope.$index, 1)"
              >删除</el-button
            >
          </template></el-table-column
        >
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="closeDialog()">确 定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      title="自定义运行脚本"
      :visible.sync="dialogScriptVisible"
      append-to-body
      class="urgent-text"
      :close-on-click-modal="false"
    >
      <el-button type="primary" @click="addUrl" style="margin-bottom:20px;">添加url参数</el-button>
      <div style="width: 100%; height: 100%">
        <textarea
          v-model="scriptText"
          type="textarea"
          :rows="15"
          autocomplete="off"
          ref="scriptText"
          style="width: 99%; height: 100%"
        ></textarea>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          @click="
            dialogScriptVisible = false
            scriptText = ''
          "
          >取 消</el-button
        >
        <el-button type="primary" @click="scriptOk">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  name: 'iframeUrlParameterDialog',
  components: {},
  props: ['field', 'allBoData'],

  data() {
    return {
      scriptText: '',
      dialogVisible: false,
      dialogScriptVisible: false,
      selectIndex: 0,
      urlParameter: []
    }
  },
  computed: {},
  created() {},

  methods: {
    addUrl() {
      this.scriptText += `var url = window.location.search;
      var urlParams = new Object();
      // 判断是否有问号
      if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        var strs = str.split("&");
        for (var i = 0; i < strs.length; i++) {
          // 每一项等号左边为属性，等号右边为属性的值，值需要使用 decodeURI() 函数对通过 escape() 或 url 编码过的字符串进行解码。
          urlParams[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
        }
      }
      // 自己定义修改需要获取url中哪个参数
      return urlParams['name'];`
    },
    closeDialog() {
      for (let item of this.urlParameter) {
        if (!item.key) {
          this.$message.error('键必填')
          return
        } else if (!item.type) {
          this.$message.error('值类型必填')
          return
        } else if (!item.value) {
          this.$message.error('值必填')
          return
        }
      }
      this.field.options.urlParameter = JSON.parse(
        JSON.stringify(this.urlParameter)
      )
      this.dialogVisible = false
    },
    openDialog() {
      this.urlParameter = JSON.parse(
        JSON.stringify(this.field.options.urlParameter)
      )
      this.dialogVisible = true
    },
    scriptOk() {
      if (this.scriptText) {
        this.urlParameter[this.selectIndex].value = Base64.encode(
          this.scriptText
        )
      }
      this.dialogScriptVisible = false
    },
    scriptTextOpen(index) {
      this.selectIndex = index
      this.scriptText = ''
      this.dialogScriptVisible = true
      if (this.urlParameter[index].value) {
        this.scriptText = Base64.decode(this.urlParameter[index].value)
      }
    },
    addUrlParameter() {
      this.urlParameter.push({key: '', type: '', value: ''})
    },
    openIframeUrlParameterDialog() {
      dialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped></style>