<template>
  <div ref="form" class="settingPanel">
    <el-row>
      <el-col :span="2">
        <el-button icon="el-icon-close" type="danger" @click=" cancelSave()" style="font-size: 16px">关闭</el-button>
      </el-col>
      <el-col :span="4">
        <div style="text-align: left; font-size: 24px; line-height: 40px">站点设置</div>
      </el-col>
      <el-col :span="18">
        <div style="text-align: right">
          <el-button @click="saveTargetWebsite" type="success" icon="el-icon-check" style="font-size: 16px">保存
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px; height: 80vh">
      <el-col :span="20" style="height: 80vh">
        <el-card class="box-card" style="height: 24vh">
          <div class="demo-input-suffix">
            <div class="title">
              <div class="dot"></div>
              基本设置
              <div class="dot"></div>
            </div>
            <el-col class="card-item" :span="2">
              <label class="text_label">网站名：</label>
            </el-col>
            <el-col class="card-item" :span="6">
              <el-input v-model="formData.siteName" size="mini" autocomplete="off"></el-input>
            </el-col>
            <el-col class="card-item" :span="2"><label class="text_label">网址：</label></el-col>
            <el-col class="card-item" :span="6">
              <el-input v-model="formData.startUrl" size="mini" autocomplete="off"></el-input>
            </el-col>
            <el-col class="card-item" :span="2">
              <label class="text_label">星级：</label>
            </el-col>
            <el-col class="card-item" :span="6">
              <el-rate v-model="formData.weight"></el-rate>
            </el-col>
            <el-col class="card-item" :span="2"><label
                class="text_label">所属项目：</label>
            </el-col>
            <el-col class="card-item" :span="6">
              <el-select
                  v-model="formData.project" size="mini"
                  placeholder="请选择"
                  style="width:100%"
              >
                <el-option
                    v-for="item in projectOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col class="card-item" :span="2"><label class="text_label">国家/地区：</label></el-col>
            <el-col class="card-item" :span="6">
              <el-cascader
                  v-model="formData.region"
                  :options="regionOptions" size="mini"></el-cascader>
            </el-col>
            <el-col class="card-item" :span="2"><label class="text_label">内容语言：</label></el-col>
            <el-col class="card-item" :span="6">
              <el-cascader
                  v-model="formData.lang"
                  :options="langOptions" size="mini"></el-cascader>
            </el-col>
            <el-col class="card-item" :span="2"><label
                class="text_label">载体类型：</label></el-col>
            <el-col class="card-item" :span="6">
              <el-select
                  v-model="formData.carrierType"
                  placeholder="请选择"
                  collapse-tags
                  style="width:100%"
                  size="mini"
              >
                <el-option
                    v-for="item in carrierTypeOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col class="card-item" :span="2"><label class="text_label">站点类型：</label>
            </el-col>
            <el-col class="card-item" :span="6">
              <el-cascader
                  v-model="formData.siteType"
                  :options="siteTypeOptions" size="mini"></el-cascader>
            </el-col>
            <el-col class="card-item" :span="2"><label class="text_label">资源种类：</label>
            </el-col>
            <el-col class="card-item" :span="6">
              <el-cascader
                  v-model="formData.resourceType"
                  :options="resourceTypeOptions" size="mini"></el-cascader>
            </el-col>
            <el-col class="card-item" :span="2"><label class="text_label">生成数据：</label>
            </el-col>
            <el-col class="card-item" :span="8">
              <el-checkbox-group v-model="formData.storageOption">
                <el-checkbox v-for="cate in storageOptionList" :label="cate.value" :key="cate.value">
                  {{ cate.label }}
                </el-checkbox>
              </el-checkbox-group>
            </el-col>
          </div>
        </el-card>
        <el-card class="box-card" style="height: 36vh">
          <div class="demo-input-suffix">
            <div style="position:relative;">
              <div class="title" style="padding:10px 90px 10px 90px;">
                <div class="dot"></div>
                解析模板
                <div class="dot"></div>
              </div>
            </div>
            <el-row v-show="rulesParser.id > 1">
              <el-row class="demo-input-suffix">
                <el-col class="card-item" :span="2">
                  <label class="text_label">规则名称：</label>
                </el-col>
                <el-col class="card-item" :span="4">
                  <label class="text_value">{{ rulesParser.parserName }}</label>
                </el-col>
                <el-col class="card-item" :span="2"><label
                    class="text_label">拓展域名：</label>
                </el-col>
                <el-col class="card-item" :span="4">
                  <label class="text_value">{{ rulesParser.allowDomain }}</label>
                </el-col>
                <el-col class="card-item" :span="2"><label
                    class="text_label">所在时区：</label></el-col>
                <el-col class="card-item" :span="4">
                  <label class="text_value">{{ rulesParser.timeZone }}</label>
                </el-col>
                <el-col class="card-item" :span="2"><label
                    class="text_label">采集深度：</label>
                </el-col>
                <el-col class="card-item" :span="4">
                  <label class="text_value">{{ rulesParser.depth }}</label>
                </el-col>
                <el-col class="card-item" :span="2"><label class="text_label">间隔时间：</label></el-col>
                <el-col class="card-item" :span="4">
                  <label class="text_value">{{ rulesParser.cron }}</label>
                </el-col>
                <el-col class="card-item" :span="2"><label class="text_label">采集范围：</label>
                </el-col>
                <el-col class="card-item" :span="4">
                  <label
                      class="text_value">{{
                      rulesParser.crawlMethod === "0" ? "普通" : rulesParser.crawlMethod === "1" ? "列表" : "翻页"
                    }}</label>
                </el-col>
                <el-col class="card-item" :span="2"><label class="text_label">渲染模式：</label></el-col>
                <el-col class="card-item" :span="4">
                  <label
                      class="text_value">{{ rulesParser.useSelenium === "0" ? "静态" : "动态" }}</label>
                </el-col>
                <el-col class="card-item" :span="2"><label class="text_label">内容页正则：</label>
                </el-col>
                <el-col class="card-item" :span="4">
                  <label class="text_value">{{ rulesParser.detailPageReg }}</label>
                </el-col>
              </el-row>
              <el-row style="margin-top: 10px">
                <div v-for="(propItem, propIndex) in rulesParser.itemPropMap" :key="propIndex">
                  <el-col class="card-item" :span="4" style="padding:0 12px 0 12px;text-align: right">
                    <el-select size="mini" disabled v-model="propItem.field" @input="forceUpdate"
                               placeholder="选择字段" style="float:right">
                      <el-option
                          v-for="item in esFields"
                          :key="item.columnProp"
                          :label="item.columnLabel"
                          :value="item.columnProp">
                      </el-option>
                    </el-select>
                  </el-col>
                  <el-col class="card-item" :span="8">
                    <label class="text_value">{{ propItem.value }}</label>
                  </el-col>
                </div>
              </el-row>
            </el-row>
            <el-row v-if="rulesParser.id > 1" style="text-align: center">
              <el-button @click="showRulesParserDialog('编辑规则', false)">编辑现有规则</el-button>
              <el-button @click="selectRulesParser">选择其他规则</el-button>
              <el-button @click="selectVisualized">可视化配置</el-button>
            </el-row>
            <el-row v-else style="text-align: center">
              <el-button @click="showRulesParserDialog('新建规则', true)">新建规则</el-button>
              <el-button @click="selectRulesParser">选择其他规则</el-button>
              <el-button @click="selectVisualized">可视化配置</el-button>
            </el-row>
            <visualizedMouldModal ref="visualizedMouldModal" :esFields=esFields :dialogVisible='ModuledialogVisible'
                                  @sendRules="getRules" @close="ModuledialogVisible=false"></visualizedMouldModal>
            <rulesParserDialog :form="rulesParser" :dialogTitle="parserDialogOptions.dialogTitle"
                               :dialogVisible="parserDialogOptions.dialogVisible"
                               :metaData="metadata" :cronList="cronList" :depthList="depthList"
                               :closeDialog="closeDialog" :submit="submitRulesParser"
            ></rulesParserDialog>
            <el-dialog :visible="parserDialogOptions.showSelect"
                       :destroy-on-close="true"
                       :show-close="false"
                       style="margin: 0 auto 50px;width: 50%;"
            >
              <div class="dialogForm">
                <span class="card-item">
                  <label class="text_label">关联解析规则ID：</label>
                </span>
                <span class="card-item">
                  <el-input v-model="parserDialogOptions.relatedParser" size="mini" autocomplete="off"></el-input>
                </span>
              </div>
              <div style="text-align: center">
                <el-button size="small" type="success" @click="saveRelatedRulesParser"
                           :loading="parserDialogOptions.saveLoading">查找
                </el-button>
                <el-button size="small" type="primary" @click="closeRelatedRulesParserDialog">关闭</el-button>
              </div>
            </el-dialog>
          </div>
        </el-card>
        <el-card class="box-card" style="height: 18vh">
          <div>
            <div class="demo-input-suffix">
              <div class="title">
                <div class="dot"></div>
                内容过滤
                <div class="dot"></div>
              </div>
              <div>
                <el-row class="demo-input-suffix">
                  <el-col class="card-item" :span="6" :offset="6">
                    <label class="text_label">规则名称：</label>
                  </el-col>
                  <el-col class="card-item" :span="12">
                    <label class="text_value">{{ rulesFilter.filterName }}</label>
                  </el-col>
                </el-row>
                <el-row v-if="rulesFilter.id > 0" style="text-align: center">
                  <el-button @click="showRulesFilterDialog('编辑规则', false)">编辑现有规则</el-button>
                  <el-button @click="selectRulesFilter">选择其他规则</el-button>
                </el-row>
                <el-row v-else style="text-align: center">
                  <el-button @click="showRulesFilterDialog('新建规则', true)">新建规则</el-button>
                  <el-button @click="selectRulesFilter">选择其他规则</el-button>
                </el-row>
                <rulesFilterDialog :form="rulesFilter" :dialogTitle="filterDialogOptions.dialogTitle"
                                   :dialogVisible="filterDialogOptions.dialogVisible"
                                   :metaData="metadata" :wordBankCategoryList="wordBankCategoryList"
                                   :closeDialog="closeDialog" :submit="submitRulesFilter"
                ></rulesFilterDialog>
                <el-dialog :visible="filterDialogOptions.showSelect"
                           :destroy-on-close="true"
                           :show-close="false"
                           style="margin: 0 auto 50px;width: 50%;"
                >
                  <div class="dialogForm">
                <span class="card-item">
                  <label class="text_label">关联过滤规则ID：</label>
                </span>
                    <span class="card-item">
                  <el-input v-model="filterDialogOptions.relatedFilter" size="mini" autocomplete="off"></el-input>
                </span>
                  </div>
                  <div style="text-align: center">
                    <el-button size="small" type="success" @click="saveRelatedRulesFilter"
                               :loading="filterDialogOptions.saveLoading">查找
                    </el-button>
                    <el-button size="small" type="primary" @click="closeRelatedRulesFilterDialog">关闭</el-button>
                  </div>
                </el-dialog>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="4" style="height:80vh">
        <el-card class="box-card" style="height:80vh">
          <div class="title">
            <div class="dot"></div>
            站点备注
            <div class="dot"></div>
          </div>
          <el-input
              type="textarea"
              :autosize="{ minRows: 30, maxRows: 40}"
              placeholder="请输入内容"
              style="margin-top: 15px"
              v-model="formData.memo">
          </el-input>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import Vue from 'vue'
import {PageHeader, Select, Message, Switch, Slider, Link, Rate, RadioButton, Option, Col, Dialog} from 'element-ui';
import metaDictApi from '../../js/api/metaDictApi';
import rulesParserApi from "@/js/api/rulesParserApi";
import rulesFilterApi from "@/js/api/rulesFilterApi";
import rulesParserDialog from '../rules/ParserDialog';
import rulesFilterDialog from '../rules/FilterDialog';
import targetWebsiteApi from "@/js/api/targetWebsiteApi";
import visualizedMouldModal from "../components/VisualizedMouldModal";

Vue.use(PageHeader)
Vue.use(Select)
Vue.use(Switch)
Vue.use(Slider)
Vue.use(Link)
Vue.use(Rate)
Vue.use(RadioButton)
Vue.use(Option)
Vue.use(Col)
Vue.use(Dialog)

export default {
  name: 'TargetWebsiteSetting',
  components: {
    "rulesParserDialog": rulesParserDialog,
    "rulesFilterDialog": rulesFilterDialog,
    "visualizedMouldModal": visualizedMouldModal
  },
  data() {
    return {
      formData: {
        carrierType: "news",
        filterConfig: 1,
        parserConfig: 0,
        project: "10001",
        region: "USA",
        lang: "",
        resourceType: "资讯",
        siteName: "",
        siteType: "",
        startUrl: "",
        storageOption: ["es"],
        weight: 3,
        memo: ""
      },
      rulesParser: {
        id: 0
      },
      showParser: [],
      rulesFilter: {
        id: 1
      },
      regionOptions: [],
      resourceTypeOptions: [],
      siteTypeOptions: [],
      carrierTypeOptions: [],
      projectOptions: [],
      langOptions: [],
      wordBankCategoryList: [],
      storageOptionList: [],
      dialogTitle: "查看规则",
      dialogVisible: false,
      depthList: [
        {label: '只采起始站点', value: 0},
        {label: '1', value: 1},
        {label: '2', value: 2},
        {label: '3', value: 3},
        {label: '4', value: 4},
        {label: '5', value: 5}
      ],
      cronList: [],
      parserDialogOptions: {
        isAdd: true,
        relatedParser: "",
        showSelect: false,
        saveLoading: false,
        dialogTitle: "查看规则",
        dialogVisible: false,
      },
      filterDialogOptions: {
        isAdd: true,
        relatedFilter: "",
        showSelect: false,
        saveLoading: false,
        dialogTitle: "查看规则",
        dialogVisible: false,
      },


      ModuledialogVisible:false
    }
  },
  mounted: function () {
    const isEdit = this.$route == null ? false : this.$route.query.isEdit;
    if (isEdit === true || isEdit === 'true') {
      this.formData = this.$route.query.data;
      this.formData.storageOption = JSON.parse(this.formData.storageOption)
    }
    if (this.formData.parserConfig > 1) {
      rulesParserApi.queryPageable({id: this.formData.parserConfig}, 0, 1, (response) => {
        if (response.data.code === 200) {
          this.rulesParser = this.reformatRulesParser(response.data.content[0]);
        }
      })
    }
    if (this.formData.filterConfig > 0) {
      rulesFilterApi.queryPageable({id: this.formData.filterConfig}, 0, 1, (response) => {
        if (response.data.code === 200) {
          const data = response.data.content[0];
          this.rulesFilter = JSON.parse(JSON.stringify(data))
          this.rulesFilter.globalIn = JSON.parse(this.rulesFilter.globalIn);
          this.rulesFilter.globalEx = JSON.parse(this.rulesFilter.globalEx);
        }
      })
    }
    metaDictApi.queryByTableName('target_website', (response) => {
      if (response.data.code === 200) {
        this.projectOptions = this.buildDictTree(response.data.content, 'project');
        this.regionOptions = this.buildDictTree(response.data.content, 'region');
        this.carrierTypeOptions = this.buildDictTree(response.data.content, 'carrierType');
        this.resourceTypeOptions = this.buildDictTree(response.data.content, 'resourceType');
        this.siteTypeOptions = this.buildDictTree(response.data.content, 'siteType');
        this.storageOptionList = this.buildDictTree(response.data.content, 'storageOption');
        this.langOptions = this.buildDictTree(response.data.content, 'lang');
      }
    })
    metaDictApi.queryByTableName('rules_parser', (response) => {
      if (response.data.code === 200) {
        this.cronList = this.buildDictTree(response.data.content, 'cronList');
      }
    })
    metaDictApi.queryByTableName('word_bank', (response) => {
      if (response.data.code === 200) {
        this.wordBankCategoryList = this.buildDictTree(response.data.content, 'category');
      }
    })

  },
  methods: {
    //打开可视化配置
    selectVisualized(){
      this.ModuledialogVisible=true
    },
    //获取规则
    getRules(row){
      this.ModuledialogVisible=false
      // console.log(row)
      this.resetRulesParser()
      this.rulesParser.id=10
       // this.rulesParser.parserName=row.statichtml
      row.details.forEach((item)=>{
        this.rulesParser.itemPropMap.push({value: item.value, field: item.field});
        // this.rulesParser.itemPropMap.push({columnProp: item.field, columnLabel: item.value});
      })
      console.log(this.rulesParser)


    },
    goBack() {
      this.$router.go(-1);
    },
    forceUpdate() {
      this.$forceUpdate();
    },
    closeDialog() {
      this.parserDialogOptions.dialogVisible = false;
      this.filterDialogOptions.dialogVisible = false;
    },
    reformatRulesParser(content) {
      let parser = content;
      parser.itemPropMap = JSON.parse(parser.itemPropMap.replaceAll("\\", "\\\\"));
      let mapping = []
      for (let propField in parser.itemPropMap) {
        mapping.push({field: propField, value: parser.itemPropMap[propField]})
      }
      parser.itemPropMap = mapping;
      return parser;
    },
    showRulesParserDialog(title, isAdd) {
      if (isAdd) {
        this.resetRulesParser()
        if (this.rulesParser.itemPropMap.length <= 0) {
          this.addFieldRule()
        }
      }
      this.parserDialogOptions.dialogTitle = title;
      this.parserDialogOptions.dialogVisible = true;
      this.parserDialogOptions.isAdd = isAdd;
    },
    closeRelatedRulesParserDialog() {
      this.parserDialogOptions.showSelect = false;
      this.parserDialogOptions.saveLoading = false;
    },
    selectRulesParser() {
      this.parserDialogOptions.relatedParser = "";
      this.parserDialogOptions.showSelect = true;
    },
    saveRelatedRulesParser() {
      this.parserDialogOptions.saveLoading = true;
      rulesParserApi.queryPageable({id: parseInt(this.parserDialogOptions.relatedParser)}, 0, 1, (response) => {
        if (response.data.code === 200) {
          this.formData.parserConfig = parseInt(this.parserDialogOptions.relatedParser);
          this.rulesParser = this.reformatRulesParser(response.data.content[0]);
        }
      })
      this.closeRelatedRulesParserDialog()
    },
    resetRulesParser() {
      this.rulesParser = {
        parserName: "",
        startUrl: "",
        allowDomain: "",
        crawlMethod: 0,
        detailPageReg: "",
        itemPropMap: [],
        timeZone: 8,
        depth: 2,
        cron: "0 0 0/6 * * ?",
        lengthLimit: "",
        useSelenium: 0,
        useProxy: 0,
      }
    },
    reformatRulesFilter(content) {
      let filter = content;
      filter.globalIn = JSON.parse(filter.globalIn);
      filter.globalEx = JSON.parse(filter.globalEx);
      return filter;
    },
    showRulesFilterDialog(title, isAdd) {
      if (isAdd) {
        this.resetRulesFilter()
      }
      this.filterDialogOptions.dialogTitle = title;
      this.filterDialogOptions.dialogVisible = true;
      this.filterDialogOptions.isAdd = isAdd;
    },
    closeRelatedRulesFilterDialog() {
      this.filterDialogOptions.showSelect = false;
      this.filterDialogOptions.saveLoading = false;
    },
    selectRulesFilter() {
      this.filterDialogOptions.relatedFilter = "";
      this.filterDialogOptions.showSelect = true;
    },
    saveRelatedRulesFilter() {
      this.filterDialogOptions.saveLoading = true;
      rulesFilterApi.queryPageable({id: parseInt(this.filterDialogOptions.relatedFilter)}, 0, 1, (response) => {
        if (response.data.code === 200) {
          this.formData.filterConfig = parseInt(this.filterDialogOptions.relatedFilter);
          this.rulesFilter = this.reformatRulesFilter(response.data.content[0]);
        }
      })
      this.closeRelatedRulesFilterDialog()
    },
    resetRulesFilter() {
      this.rulesFilter = {
        filterName: "",
        startUrl: "",
        titleIn: "",
        titleEx: "",
        contentIn: "",
        contentEx: "",
        urlIn: "",
        urlEx: "",
        globalIn: [],
        globalEx: ["0", "2", "3", "4"],
        lengthLimit: 0
      }
    },
    buildDictTree(data, columnString) {
      const siteOptions = [];
      let nodeList = []
      data.forEach(e => {
        if (e.columnName === columnString)
          nodeList.push({
            value: e.dictCode,
            label: e.dictValue,
            children: undefined,
            parentDictCode: e.parentDictCode
          });
      })
      nodeList.forEach(e1 => {
        if (e1.parentDictCode !== undefined) {
          nodeList.forEach(e2 => {
            if (e1.parentDictCode === e2.value) {
              if (e2.children === undefined) {
                e2.children = []
              }
              e2.children.push(e1);
            }
          })
        } else {
          siteOptions.push(e1);
        }
      })
      return siteOptions;
    },
    submitRulesParser() {
      this.parserDialogOptions.saveLoading = true;
      let dataBody = {}
      for (let formField in this.rulesParser) {
        if (formField !== 'itemPropMap') {
          dataBody[formField] = this.rulesParser[formField];
        } else {
          let propMap = {}
          const propMapList = this.rulesParser[formField];
          for (let i = 0; i < propMapList.length; ++i) {
            propMap[propMapList[i].field] = propMapList[i].value
          }
          dataBody[formField] = JSON.stringify(propMap).replaceAll("\\\\", "\\")
          // 注意，这里必须在 stringfy 之后二次将双反斜杠转换成单个，以适应日期正则表达式的情况
        }
      }
      if (this.rulesParser.id === undefined) {
        rulesParserApi.add(dataBody, (response) => {
          if (response.data.code === 200) {
            this.closeDialog();
            Message.success("添加成功")
            this.formData.parserConfig = parseInt(response.data.content.id);
            this.rulesParser = this.reformatRulesParser(response.data.content);

          } else {
            this.closeDialog();
            Message.error("添加失败")
          }
        })
      } else {
        rulesParserApi.update(dataBody, (response) => {
          if (response.data.code === 200) {
            this.closeDialog();
            Message.success("更新成功")
            if (this.parserDialogOptions.isAdd) {
              Message.success("新增的规则ID是" + response.data.content.id)
            }
          } else {
            this.closeDialog();
            Message.error("更新失败")
          }
        })
      }
      this.parserDialogOptions.saveLoading = false;
    },
    submitRulesFilter() {
      this.filterDialogOptions.saveLoading = true;
      let dataBody = {}
      for (let formField in this.rulesFilter) {
        if (formField.startsWith('global')) {
          dataBody[formField] = JSON.stringify(this.rulesFilter[formField]);
        } else {
          dataBody[formField] = this.rulesFilter[formField];
        }
      }
      if (this.rulesFilter.id === undefined) {
        rulesFilterApi.add(dataBody, (response) => {
          if (response.data.code === 200) {
            this.rulesFilter.id = response.data.content.id
            this.filterDialogOptions.relatedFilter = this.rulesFilter.id
            this.saveRelatedRulesFilter()
            this.closeDialog();
            Message.success("添加成功")
          } else {
            this.closeDialog();
            Message.error("添加失败")
          }
        })
      } else {
        rulesFilterApi.update(dataBody, (response) => {
          if (response.data.code === 200) {
            this.closeDialog();
            Message.success("更新成功")
          } else {
            this.closeDialog();
            Message.error("更新失败")
          }
        })
      }
      this.formData.filterConfig = this.rulesFilter.id;
      this.filterDialogOptions.saveLoading = false;
    },

    addFieldRule() {
      this.rulesParser.itemPropMap.push({value: '', field: 'es_urltitle'});
      this.rulesParser.itemPropMap.push({value: '', field: 'es_urlcontent'});
      this.rulesParser.itemPropMap.push({value: '', field: 'es_urltime'});
      this.rulesParser.itemPropMap.push({value: '', field: 'es_lasttime'});
    },
    saveTargetWebsite() {
      const tempData = {...this.formData};
      if ((tempData.siteName == null || tempData.siteName.trim() === "")) {
        Message({
          message: '请输入网站名',
          type: 'warning'
        });
        return;
      }
      tempData.status = 0;
      tempData.region = tempData.region.constructor === Array ? tempData.region[tempData.region.length - 1] : tempData.region;
      tempData.siteType = tempData.siteType.constructor === Array ? tempData.siteType[tempData.siteType.length - 1] : tempData.siteType;
      tempData.resourceType = tempData.resourceType.constructor === Array ? tempData.resourceType[tempData.resourceType.length - 1] : tempData.resourceType;
      tempData.carrierType = tempData.carrierType.constructor === Array ? tempData.carrierType[tempData.carrierType.length - 1] : tempData.carrierType;
      tempData.lang = tempData.lang.constructor === Array ? tempData.lang[tempData.lang.length - 1] : tempData.lang;
      tempData.storageOption = tempData.storageOption.constructor === Array ? JSON.stringify(tempData.storageOption) : tempData.storageOption
      targetWebsiteApi.update(tempData, (response) => {
        if (response.data.code === 200) {
          this.$router.push({path: '/oscm/target/website'});
          Message({
            message: '保存成功',
            type: 'success'
          });

        } else {
          Message({
            message: '保存失败',
            type: 'error'
          });
        }
      })
    },
    cancelSave() {
      this.$router.push({path: '/oscm/target/website'})
      // this.$router.go(-1);
    }
  },
  computed: {
    metadata: function () {
      const temp = [];
      this.$store.state.metadata.metadata.forEach((element) => {
        if (element.tableName === "rules_parser") {
          let tempElement = {...element};
          tempElement.minWidth = tempElement.columnWidth + "%";
          tempElement.columnWidth = 0;
          temp.push(tempElement);
        }
      });
      return temp;
    },
    esFields: function () {
      let temp = [];
      this.$store.state.metadata.metadata.forEach(element => {
        if (element.tableName === 'es_public_info') {
          temp.push(element);
        }
      });
      return temp;
    },
  }
}
</script>

<style scoped>
.box-card .text_label {
  text-align: right;
  font-weight: bold;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  width: 100%;
  line-height: 28px;
}

.text_value {
  text-align: left;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  padding: 0 12px 0 0;
  box-sizing: border-box;
  width: 100%;
  line-height: 28px;
}

.box-card {
  background-color: #f8f8f8;
  margin: 1vh 5px 1vh 5px;
  /*min-height: 30%;*/
  /*padding: 5px;*/
}

.box-card .title {
  text-align: center;
  font-size: 18px;
  margin: 5px 0 8px 0;
  color: #666;
}

.dialogForm {
  display: flex;
  justify-content: center;
}

.box-card .dot {
  display: inline-block;
  vertical-align: middle;
  width: 6px;
  height: 6px;
  margin: 0 15px;
  background-color: #0080e5;
}

.el-input__inner {
  height: 28px !important;
  line-height: 28px !important;
}

.card-item {
  height: 40px;
}

.el-cascader--mini {
  width: 100%;
}

.logintype_content {
  margin: 5px;
  border: 1px solid rgb(221, 221, 221);
  background-color: rgb(242, 242, 242);
  padding: 10px 10px 0 10px;
}

.el-page-header, .el-page-header__content {
  color: #666 !important;
}

.parse-button-icon {
  text-align: center;
  color: #409EFF;
}

.el-radio-group {
  margin-top: 5px;
}

.el-button:focus, .el-button:hover {
  margin-right: 0;
}

.redstar {
  color: red;
  margin-right: 2px;
}
</style>