？<template>
  <layout-form>
    <el-dialog
      :title="qaDialog.title"
      :visible.sync="qaDialog.visible"
      width="800px"
      append-to-body
    >
      <!--表单添加-->
      <el-form label-width="80px">
        <div>
          <el-button size="mini" plain type="success" @click="addListRow()"
            >新增问答</el-button
          >
          <el-table
            :data="dynamicForm.options"
            border
            style="width: 100%; margin-top: 15px"
          >
            <el-table-column label="问题内容" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="'options.' + scope.$index + '.qaContent'"
                >
                  <el-input
                    type="textarea"
                    v-model="scope.row.qaContent"
                    placeholder="请输入问题内容"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>

            <el-table-column label="问题答案" align="center">
              <template slot-scope="scope">
                <el-form-item
                  label-width="0"
                  :prop="'options.' + scope.$index + '.ans'"
                >
                  <el-input
                    type="textarea"
                    v-model="scope.row.ans"
                    placeholder="请输入问题答案"
                  ></el-input>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="操作" align="center">
              <template slot-scope="scope">
                <el-form-item label-width="0">
                  <el-button
                    size="mini"
                    type="text"
                    icon="el-icon-delete"
                    @click="handTableDelete(scope.$index, scope.row)"
                    >删除</el-button
                  >
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="qaConfirm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-form
      :model="form"
      :loading="loading"
      :rules="rules"
      size="small"
      style="width: 100%"
      label-width="120px"
      ref="form"
    >
      <el-row>
        <Field
          label="模板标题"
          prop="title"
          v-model="form.title"
          placeholder="请输入模板标题"
        />
        <Field
          label="办理机构"
          prop="jointInfoShow"
          v-model="form.jointInfoShow"
          placeholder="请输入办理机构"
        />

        <el-col span="12">
          <el-form-item
            label="法定时限"
            prop="legalTimeLimitShow"
            class="my-form-field"
          >
            <el-input
              placeholder="请输入法定时限"
              v-model="form.legalTimeLimitShow"
            >
              <template slot="append">个工作日</template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col span="12">
          <el-form-item
            label="承诺时限"
            prop="promiseTimeLimitShow"
            class="my-form-field"
          >
            <el-input
              placeholder="请输入承诺时限"
              v-model="form.promiseTimeLimitShow"
            >
              <template slot="append">个工作日</template>
            </el-input>
          </el-form-item>
        </el-col>

        <el-col span="12">
          <el-form-item
            label="收费标准"
            prop="isChargesShow"
            class="my-form-field"
          >
            <el-input
              placeholder="请输入内容"
              v-model="form.charges"
              :disabled="isChargesShow"
              class="input-with-select"
            >
              <el-select
                slot="prepend"
                @change="changeCharges"
                v-model="form.isChargesShow"
              >
                <el-option
                  v-for="(label, value) in dict.isChargesShow"
                  :key="value"
                  :label="label"
                  :value="value"
                ></el-option>
              </el-select>
            </el-input>
          </el-form-item>
        </el-col>

        <Field
          label="办公时间"
          prop="handleTimeShow"
          v-model="form.handleTimeShow"
          placeholder="请输入办公时间"
        />
        <Field
          label="办公地址"
          prop="handlePlaceShow"
          v-model="form.handlePlaceShow"
          placeholder="请输入办公地址"
        />
        <Field
          label="咨询电话"
          prop="cousultingTelephoneShow"
          v-model="form.cousultingTelephoneShow"
          placeholder="请输入咨询电话"
        />
        <Field
          label="投诉电话"
          prop="supervisoryTelephoneShow"
          v-model="form.supervisoryTelephoneShow"
          placeholder="请输入投诉电话"
        />
        <Field
          label="结果信息"
          prop="resultInfo"
          v-model="form.resultInfo"
          placeholder="请输入结果信息"
          type="textarea"
        />

        <el-col span="12">
          <el-form-item label="常见问题" class="my-form-field">
            <el-button @click.prevent="handEditQa(form.qa)"
              >编辑常见问题</el-button
            >

            <br />

            <span style="white-space: pre-wrap">{{ qa }}</span>
          </el-form-item>
        </el-col>
        <!-- <el-row>
          <el-col>常见问题</el-col>
          <el-col style="white-space: pre-wrap">{{ form.qa }}</el-col>
        </el-row> -->

        <!-- <Field label="常见问题" prop="qa" v-model="form.qa" placeholder="请输入常见问题" /> -->
      </el-row>
      <form-buttons @submit="submitForm" />
    </el-form>
  </layout-form>
</template>

<script>
import form from "@/assets/mixins/form";
export default {
  mixins: [form],
  created() {
    const { basicsId } = this.$route.query;
    this.form.basicsId = basicsId;
  },
  methods: {
    beforeRender(data) {
      console.log("渲染前", data);

      if (data.entity.qa && data.entity.qa.length > 0) {
        this.dynamicForm.options = JSON.parse(data.entity.qa);
        this.qa = this.formterQaStr(this.dynamicForm.options);
      }

      return data;
    },

    handTableDelete(index, val) {
      console.log(index, val);

      this.dynamicForm.options.splice(index, 1);
    },
    changeCharges(val) {
      if (val && val === "1") {
        this.isChargesShow = false;
      } else {
        this.isChargesShow = true;
      }
    },
    handEditQa(val) {
      console.log(val);

      this.qaDialog.visible = true;
    },

    qaConfirm() {
      //确定 组装qa
      this.qa = this.formterQaStr(this.dynamicForm.options);
      this.form.qa = JSON.stringify(this.dynamicForm.options);
      this.qaDialog.visible = false;
    },

    formterQaStr(arrs) {
      let qa = arrs.map((item) => {
        let str = "";
        str += "问：" + item.qaContent + "\n";
        str += "答：" + item.ans + "\n";
        return str;
      });

      return qa.join("");
    },

    cancel() {
      this.qaDialog.visible = false;
    },

    addListRow() {
      this.dynamicForm.options.push({
        qaContent: "",
        ans: "",
      });
    },
  },
  data() {
    return {
      qaDialog: {
        visible: false,
        titile: "常见问题",
      },
      qa: "",

      dynamicForm: {
        options: [],
      },
      toString: ["isChargesShow"],

      isChargesShow: false,
      rules: {
        title: [
          { required: true, message: "模板标题不能为空", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        jointInfoShow: [
          { required: true, message: "选项内容不能为空", trigger: "blur" },
          { max: 128, message: "最多只能录入128个字符", trigger: "blur" },
        ],
        legalTimeLimitShow: [
          { required: true, message: "选项内容不能为空", trigger: "blur" },
          { max: 20, message: "最多只能录入20个字符", trigger: "blur" },
        ],
        promiseTimeLimitShow: [
          { required: true, message: "选项内容不能为空", trigger: "blur" },
          { max: 20, message: "最多只能录入20个字符", trigger: "blur" },
        ],

        isChargesShow: [
          { required: true, message: "选项内容不能为空", trigger: "blur" },
        ],

        handleTimeShow: [
          { required: true, message: "选项内容不能为空", trigger: "blur" },
          { max: 256, message: "最多只能录入256个字符", trigger: "blur" },
        ],
        handlePlaceShow: [
          { required: true, message: "选项内容不能为空", trigger: "blur" },
          { max: 256, message: "最多只能录入256个字符", trigger: "blur" },
        ],
        cousultingTelephoneShow: [
          { required: true, message: "选项内容不能为空", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        supervisoryTelephoneShow: [
          { required: true, message: "选项内容不能为空", trigger: "blur" },
          { max: 64, message: "最多只能录入64个字符", trigger: "blur" },
        ],
        resultInfo: [
          { required: true, message: "选项内容不能为空", trigger: "blur" },
          { max: 256, message: "最多只能录入256个字符", trigger: "blur" },
        ],
      },
    };
  },
};
</script>

<style lang="scss" scoped>
.el-select .el-input {
  width: 100px;
}
.input-with-select .el-input-group__prepend {
  background-color: #fff;
}
</style>
